Typoscript navigation with subpages - typo3

Question

I am trying to implement my navigation with typoscript and I am having problems to understand how to wrap right.
I already have a base navigation with 1 level that is working fine.
Now I have pages that has subpages and other that don't have.
For the ones without subpages I want the behavior that I have now.
For the pages with subpages I want to add this as an dropdown menu.
The HTML code should look like this.
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Test0
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="">DropwDownItem1</li>
</ul>
</li>
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
TypoScript:
lib.menu = HMENU
lib.menu {
special = list
special.value = 3,2
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
expAll = 1
NO.wrapItemAndSub = <li class="">|</li>
RO < .NO
RO = 1
CUR < .NO
CUR = 1
CUR.wrapItemAndSub = <li class="active">|</li>
ACT < .CUR
IFSUB = 1
IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
IFSUB.stdWrap.innerWrap= |<b class="caret"></b>
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub= <li class="dropdown">|</li>
ACTIFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
ACTIFSUB.stdWrap.innerWrap= |<b class="caret"></b>
CURIFSUB = 1
CURIFSUB.wrapItemAndSub= <li class="dropdown">|</li>
CURIFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
CURIFSUB.stdWrap.innerWrap= |<b class="caret"></b>
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
expAll = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
}
//EDIT: I have changed the code but now when I click on an item in the dropdown menu the ul class="dropdown-menu" is wrapped two times and the dropdown isn't shown properly.

Answer 1

The option noBlur is removed since TYPO3 v6.0 and I read somewhere, that the RO state does something with javascript to show/hide the submenu - so I try not to use it. I rather do the showing/hiding via css.
I would've done it like this:
lib.menu = HMENU
lib.menu {
special = list
special.value = 3,2
1 = TMENU
1 {
expAll = 1
wrap = <ul class="nav">|</ul>
NO.wrapItemAndSub = <li>|</li>
CUR = 1
CUR.wrapItemAndSub = <li class="active">|</li>
ACT < .CUR
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
}
Add the hover-effect via CSS:
.nav ul {
display: none;
}
.nav li:hover ul {
display: block;
}

Answer 2

The <ul> wrap of your subnavi should be around the TMENU. I don't think you need the ATagBeforeWrap as it only makes linkWrap within the <a> tag. So it should look like this (not tested):
lib.menu = HMENU
lib.menu {
special = list
special.value = 3,2
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
expAll = 1
NO.wrapItemAndSub = <li class="">|</li>
RO < .NO
RO = 1
CUR < .NO
CUR = 1
CUR.wrapItemAndSub = <li class="active">|</li>
ACT < .CUR
noBlur = 1
IFSUB = 1
IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
}
Here you can find good info about wraps, unfortunately it's in german: http://jweiland.net/typo3/typoscript/wrap-moeglichkeiten-und-hierarchie-in-menues.html
By the way: if you are using TYPO3 6+ the noBlur setting has been removed.
---> EDIT:
I shortened your code a little, but I really coudn't reproduce the problem. For me it's working fine. The li around the dropdown gets the dropdown class. But I don't see a duplicate of the <ul class="dropdown-menu">
special = list
special.value = 3,2
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
expAll = 1
NO = 1
NO.wrapItemAndSub = <li class="">|</li>
RO < .NO
CUR < .NO
CUR.wrapItemAndSub = <li class="active">|</li>
ACT < .CUR
IFSUB = 1
IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
IFSUB.stdWrap.innerWrap= |<b class="caret"></b>
ACTIFSUB < .IFSUB
CURIFSUB < .IFSUB
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
expAll = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}

Answer 3

This snippet I have used for internal page links:
I have used subtitle field for internal navigation.
for example:
<a href="#about>about</a>
Ourservice
menu.main_menu = HMENU
menu.main_menu {
#special = directory
#special.value = 2
1 = TMENU
1 {
wrap = <ul class="nav navbar-nav navbar-right">|</ul>
expAll = 1
noBlur = 1
NO = 1
NO {
doNotLinkIt = 1
allWrap.insertData = 1
allWrap = <li class="first menu-{field:uid}">|</li>
}
ACT < .NO
ACT {
ATagParams = class="active dropdown"
allWrap = <li class="active first menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
}
CUR < .NO
CUR {
ATagParams = class="parent_menu active"
allWrap = <li class="first active menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
}
}
}