I have a strange behavior of TYPO3 menu, when one of the page is sysFolder, the subpages of this folder don't show in the menu. If I change this type to not visible in menu, the subpages still don't show up.
The code of my menu looks like this:
[PIDinRootline = 1234]
lib.left-menu = COA
lib.left-menu.1 = HMENU
lib.left-menu.1 {
entryLevel = 2
expAll = 1
1 = TMENU
1.noBlur = 1
1 {
wrap = <nav class="left-menu"><ul>|</ul></nav>
expAll = 0
noBlur = 1
NO {
wrapItemAndSub= <li class="inactive first">|</li> |*| <li class="inactive">|</li> |*| <li class="inactive last">|</li>
ATagParams =
}
CUR=1
CUR {
wrapItemAndSub= <li class="cur_inactive first">|</li> |*| <li class="cur_inactive">|</li> |*| <li class="cur_inactive last">|</li>
ATagParams =
}
CURIFSUB=1
CURIFSUB {
wrapItemAndSub= <li class="cur_active first">|</li> |*| <li class="cur_active">|</li> |*| <li class="cur_active last">|</li>
ATagParams =
}
ACT=1
ACT {
wrapItemAndSub= <li class="cur_active first">|</li> |*| <li class="cur_active">|</li> |*| <li class="cur_active last">|</li>
ATagParams =
}
}
2 = TMENU
2.noBlur = 1
2 {
wrap = <ul>|</ul>
expAll = 0
NO{
ATagTitle.field = title
wrapItemAndSub = <li>|</li>
}
CUR=1
CUR {
wrapItemAndSub= <li class="cur_active2">|</li>
ATagParams =
}
CURIFSUB=1
CURIFSUB {
wrapItemAndSub= <li class="cur_active2">|</li>
ATagParams =
}
ACT = 1
ACT {
wrapItemAndSub = <li class="active2">|</li>
}
}
}
[end]
Related
I am quite new to TypoScript, I am making a dropdown menu in TYPO3 which works perfectly fine.
When user clicks the menu item (with hamburger icon which indicates that this menu item has a dropdown) a dropdown opens up. I want to make the menu item itself not clickable, it should only open a dropdown menu. Below is my code, I would appreciate any ideas or help. Right Now, If I click the menu item item It opens up a new page (It should only open a dropdown).
lib.mobileNav = HMENU
lib.mobileNav {
entryLevel = 0
1 = TMENU
wrap = <nav id="mobile-menu" class="main-nav"><ul> | </ul></nav>
doNotLinkIt = 1
1 {
expAll = 1
wrap = <ul class="1">|</ul>
NO = 1
NO {
wrapItemAndSub = <li class="level-1">|</li>
ATagTitle.field = title
}
IFSUB < .NO
IFSUB = 1
IFSUB {
wrapItemAndSub = <li class="level-1 dropdown">|</li>
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="level-1 active">|</li>
ATagParams = class="level-1 active"
}
ACTIFSUB < .NO
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = <li class="dropdown active level-1">|</li>
}
}
2 = TMENU
2 {
wrap = <ul class=" level-2" role="menu">|</ul>
NO = 1
NO {
wrapItemAndSub = <li class="level-2">|</li>
ATagParams = class="level-2"
stdWrap.htmlSpecialChars = 1
}
ACT = .NO
ACT {
wrapItemAndSub = <li class="active level-2">|</li>
ATagParams = class="active level-2"
}
}
}
You've the parameter doNotLinkIt on the wrong level, it's for TMENU-items and not for the whole HMENU or whole TMENUs. You can see the reference here in TSREF
Below is the menu as it should work, I sorted a bit to make it easier readable.
lib.mobileNav = HMENU
lib.mobileNav {
entryLevel = 0
wrap = <nav id="mobile-menu" class="main-nav"><ul> | </ul></nav>
1 = TMENU
1 {
expAll = 1
wrap = <ul class="1">|</ul>
NO = 1
NO {
wrapItemAndSub = <li class="level-1">|</li>
ATagTitle.field = title
doNotLinkIt = 1
}
IFSUB < .NO
IFSUB = 1
IFSUB {
wrapItemAndSub = <li class="level-1 dropdown">|</li>
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="level-1 active">|</li>
ATagParams = class="level-1 active"
}
ACTIFSUB < .NO
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = <li class="dropdown active level-1">|</li>
}
}
2 = TMENU
2 {
wrap = <ul class=" level-2" role="menu">|</ul>
NO = 1
NO {
doNotLinkIt = 1
wrapItemAndSub = <li class="level-2">|</li>
ATagParams = class="level-2"
stdWrap.htmlSpecialChars = 1
}
ACT < .NO
ACT {
wrapItemAndSub = <li class="active level-2">|</li>
ATagParams = class="active level-2"
}
}
}
Actually the items without subitems should stay clickable or should be removed, since otherwise you will have menu entries that can not be clicked at all.
So the code for a menu with clickable items AND non-clickable items with dropdowns for subitems would look like this:
lib.mobileNav = HMENU
lib.mobileNav {
entryLevel = 0
wrap = <nav id="mobile-menu" class="main-nav"><ul> | </ul></nav>
1 = TMENU
1 {
expAll = 1
wrap = <ul class="1">|</ul>
NO = 1
NO {
wrapItemAndSub = <li class="level-1">|</li>
ATagTitle.field = title
}
IFSUB < .NO
IFSUB {
wrapItemAndSub = <li class="level-1 dropdown">|</li>
doNotLinkIt = 1
}
ACT < .NO
ACT {
wrapItemAndSub = <li class="level-1 active">|</li>
ATagParams = class="level-1 active"
}
ACTIFSUB < .NO
ACTIFSUB {
wrapItemAndSub = <li class="dropdown active level-1">|</li>
doNotLinkIt = 1
}
}
2 = TMENU
2 {
wrap = <ul class=" level-2" role="menu">|</ul>
NO = 1
NO {
wrapItemAndSub = <li class="level-2">|</li>
ATagParams = class="level-2"
stdWrap.htmlSpecialChars = 1
}
ACT < .NO
ACT {
wrapItemAndSub = <li class="active level-2">|</li>
ATagParams = class="active level-2"
}
}
}
I would like to create a dropdown login box in the menu. When users hover over "login" in the menu, it shows the login or register form. I found an example here: https://www.planet-sports.com/en/
I am quite new to TYPO3 so I don't know where I should start. Is there a way to do this with Typoscript only or should I modify the navbar with html and javascript? What is the best way to do this ?
EDIT: I am using a custom theme (not done by myself)
The Menu is called in a "header.html" file like this:
<nav class="collapse navbar-collapse navbar-main-collapse" role="navigation">
<f:cObject typoscriptObjectPath="menu.navbar" />
</nav>
Typoscript for the navbar:
menu.navbar = HMENU
menu.navbar {
entryLevel = 0
excludeUidList = 112
1 = TMENU
1 {
expAll = 1
stdWrap.dataWrap = <ul class="nav navbar-nav colum-{register:count_menuItems}">|</ul>
NO {
htmlSpecialChars = 1
wrapItemAndSub = <li id="navbar{field:uid}" class="first" >|</li> |*| <li id="navbar{field:uid}">|</li> |*| <li id="navbar{field:uid}" class="last navbar-right">|</li>
wrapItemAndSub.insertData = 1
ATagTitle.field = description // subtitle
}
ACT = 1
ACT {
htmlSpecialChars = 1
wrapItemAndSub = <li id="navbar{field:uid}" class="first active">|</li> |*| <li id="navbar{field:uid}" class="active">|</li> |*| <li id="navbar{field:uid}" class="last active navbar-right">|</li>
wrapItemAndSub.insertData = 1
ATagTitle.field = description // subtitle
}
IFSUB = 1
IFSUB {
ATagTitle.field = description // subtitle
wrapItemAndSub = <li id="navbar{field:uid}" class="dropdown first">|</li> |*| <li id="navbar{field:uid}" class="dropdown">|</li> |*| <li id="navbar{field:uid}" class="dropdown last">|</li>
wrapItemAndSub.insertData = 1
stdWrap.htmlSpecialChars = 1
ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
linkWrap = |<span class="caret"></span>
ATagBeforeWrap = 1
}
ACTIFSUB < .IFSUB
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub = <li id="navbar{field:uid}" class="dropdown first active">|</li> |*| <li id="navbar{field:uid}" class="dropdown active">|</li> |*| <li id="navbar{field:uid}" class="dropdown last active">|</li>
}
2 = TMENU
2 {
expAll = 1
wrap = <ul class="dropdown-menu">|</ul>
NO.htmlSpecialChars = 1
NO.wrapItemAndSub = |*| <li class="odd">|</li> || <li class="even">|</li> |*|
ACT = 1
ACT.htmlSpecialChars = 1
ACT.wrapItemAndSub = |*| <li class="odd active">|</li> || <li class="even active">|</li> |*|
}
3 = TMENU
3 {
expAll = 1
wrap = <ul class="dropdown-submenu">|</ul>
NO.htmlSpecialChars = 1
NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
ACT = 1
ACT.htmlSpecialChars = 1
ACT.wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="active last">|</li>
}
4 = TMENU
4 {
wrap = <ul class="dropdown-submenu-1">|</ul>
NO.htmlSpecialChars = 1
NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
ACT = 1
ACT.htmlSpecialChars = 1
ACT.wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="active last">|</li>
}
}
first of all: the visibility of a layer can be handled with CSS (even fade in/fade out or explode/implode). just put all content in a div which is included in the trigger div.
How you get your content into this div depends of the kind you build your page. fluid-template, marker-template, pure typoscript.
there are multiple ways to get the login form (and other content) into the div: create it by typoscript, get the content from a fix page, get the content from a special column which is inherited to all subpages (slide).
just be a little be more specific what your current configuration is, what you are familiar with and what you want to achieve.
I am building a navigation menu with TYPOscript which is extended with content from the tt_content table.
Now I am trying to change the CSS-class of the parent element (.drop-wrapp), if there is content from tt_content and put the page title from parent page in second level (here: "PAGE TITLE FIRST LEVEL").
This is my TYPOscript so far:
lib.navMain = COA
lib.navMain {
10 = TEXT
10.wrap = |
10.value = {$const.lang.navi.skip}
10.typolink {
parameter.data = page:uid
parameter.dataWrap = |#skipMainNavi
ATagParams = class="sr-only sr-only-focusable"
}
20 = HMENU
20 {
special = directory
special.value = {$const.pid.home}
entryLevel = 0
1 = TMENU
1 {
wrap = <ul class="nav navbar-nav" role="menubar">|</ul>
expAll = 1
target = _top
noBlur = 1
wrap= <ul class="nav navbar-nav" role="menubar">|</ul>
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
linkWrap = |
ATagParams = role="menuitem"
title = field:title
ATagTitle.field = subtitle // title
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
ATagParams = class="mainmenuActive"
# linkWrap = <strong>|</strong>
}
}
2 < .1
2 {
wrap = <div class="drop-wrapp CLASS_IF_CONTENT_FROM_TT_CONTEN"><div class="drop-wrapp-inner">|</div></div>
20 = HMENU
20 {
special = directory
special.value.data = field:pid
1 = TMENU
1 {
expAll = 1
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
linkWrap = |
ATagParams = role="menuitem"
title = field:title
ATagTitle.field = subtitle // title
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
ATagParams = class="mainmenuActive"
# linkWrap = <strong>|</strong>
}
}
}
stdWrap.append = CONTENT
stdWrap.append {
table = tt_content
select {
pidInList.field = pid
where = colPos=1 AND deleted=0 AND hidden=0
orderBy = sorting
languageField = sys_language_uid
max = 2
}
stdWrap {
wrap = <div class="teaser-block"><div class="teaser-block-inner"><strong class="title">PAGE TITLE FIRST LEVEL</strong><div class="teaser-text">|</div></div></div>
// wrap only if there is content!
required = 1
}
}
stdWrap.innerWrap = <div class="drop-block"><ul class="list-unstyled nav-list" role="menubar">|</ul></div>
}
}
30 = TEXT
30.wrap = <a id="skipMainNavi" class="sr-only">|</a>
30.value =
30.htmlSpecialChars = 0
}
UPDATE:
This is very breafly what I want to achieve:
<nav>
<ul>
<li>Level 0.0</li>
<li>
Level 0.1
<div class="drop-wrapp wide"><!-- only add class ".wide" if there is content from tt_content in "div.teaser-block" -->
<div class="drop-wrapp-inner">
<div class="drop-block">
<ul>
<li>Level 1.0</li>
<li>Level 1.1</li>
<li>Level 1.2</li>
</ul>
</div>
<div class="teaser-block">
Here is content from tt_content
</div>
</div>
</div>
</li>
<li>Level 0.2</li>
</ul>
</nav>
I am sure, there are better solutions, but the following example works now for me. My trick are the two elements after the "30 = CONTENT" element. If there is content from tt_content I open a "div"-element and close if afterwards. Maybe there is a better way to do this with a special wrap?
lib.navMain = COA
lib.navMain {
10 = TEXT
10.wrap = |
10.value = {$const.lang.navi.skip}
10.typolink {
parameter.data = page:uid
parameter.dataWrap = |#skipMainNavi
ATagParams = class="sr-only sr-only-focusable"
}
20 = HMENU
20 {
special = directory
special.value = {$const.pid.home}
entryLevel = 0
1 = TMENU
1 {
expAll = 1
target = _top
noBlur = 1
wrap = <ul class="nav navbar-nav" role="menubar">|</ul>
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
linkWrap = |
ATagParams = role="menuitem"
title = field:title
ATagTitle.field = subtitle // title
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
ATagParams = class="mainmenuActive"
# linkWrap = <strong>|</strong>
}
}
2 < .1
2 {
wrap = <div class="drop-wrapp"><div class="drop-wrapp-inner">|</div></div>
stdWrap.cObject = COA
stdWrap.cObject {
20 = HMENU
20 {
special = directory
special.value.data = field:pid
1 = TMENU
1 {
expAll = 1
wrap = <div class="drop-block"><ul class="list-unstyled nav-list" role="menubar">|</ul></div>
NO {
wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
linkWrap = |
ATagParams = role="menuitem"
title = field:title
ATagTitle.field = subtitle // title
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
ATagParams = class="mainmenuActive"
# linkWrap = <strong>|</strong>
}
}
}
30 = CONTENT
30 {
table = tt_content
select {
pidInList.field = pid
where = colPos=99 AND deleted=0 AND hidden=0
orderBy = sorting
languageField = sys_language_uid
max = 2
}
stdWrap {
wrap = |
// wrap only if there is content!
required = 1
}
}
1 = COA
1 {
if.isTrue.numRows < lib.navMain.20.2.stdWrap.cObject.30
10 = TEXT
10.value = <div class="wide">
}
100 = COA
100 {
if.isTrue.numRows < lib.navMain.20.2.stdWrap.cObject.30
10 = TEXT
10.value = </div><!-- /.wide -->
}
}
}
}
30 = TEXT
30.wrap = <a id="skipMainNavi" class="sr-only">|</a>
30.value =
30.htmlSpecialChars = 0
}
my dropdown menu does not work as I planned it to.
Here
you can find the menu I'm working on.
When I press 'Produkte' there should open a dropdown menu with 2 submenu points.
If I get this dropdown, and these menu points again have submenus, there should be another dropdown. Is this possible ? And if yes, how, I'm quite new to TypoScript..
EDIT: okay i just saw the .. , how can i link this relative, so if I add a new submenu point it will automatically show in there?
Maybe using data-target="dropdown"?
lib.field_topmenu = HMENU
lib.field_topmenu {
1 = TMENU
1 {
wrap = <ul class="nav navbar-nav">|</ul>
expAll = 1
NO = 1
NO {
allWrap = <li>|</li>
ATagTitle.field = title
}
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
ATagTitle.field = title
}
IFSUB = 1
IFSUB {
before = <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="dropdown">
after = <b class="caret"></b></a>
doNotLinkIt = 1
wrapItemAndSub = <li class="dropdown">|</li>
ATagTitle.field = title
ATagParams = class="dropdown-toggle" data-toggle="dropdown"
ATagBeforeWrap = 1
}
ACTIFSUB = 1
ACTIFSUB {
before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
after = <b class="caret"></b></a>
# doNotLinkIt = 1
wrapItemAndSub = <li class="dropdown active">|</li>
ATagTitle.field = title
ATagBeforeWrap = 1
}
}
2 = TMENU
2 {
expAll = 1
wrap = <ul class="dropdown-menu">|</ul>
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
ATagTitle.field = title
}
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = |
before = <li class="divider"></li><li class="nav-header">
after = </li>
# doNotLinkIt = 1
ATagTitle.field = title
}
NO {
allWrap = <li>|</li>
ATagTitle.field = title
}
IFSUB = 1
IFSUB {
before = <li class="divider"></li><li class="nav-header">
after = </li>
doNotLinkIt = 1
ATagTitle.field = title
}
SPC = 1
SPC {
allWrap = <li class="divider"></li><li class="nav-header">|</li>
}
}
3 = TMENU
3 {
NO {
allWrap = <li>|</li>
ATagTitle.field = title
}
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
ATagTitle.field = title
}
}
Solved the problem.
lib.field_topmenu = HMENU
lib.field_topmenu {
entryLevel = 0
1 = TMENU
1 {
expAll = 1
wrap = <ul class="nav navbar-nav"> | </ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
ACT <.NO
ACT {
wrapItemAndSub = <li class="active">|</li>
}
IFSUB <.NO
IFSUB {
allWrap = <!!==:>|
wrapItemAndSub = <li class="dropdown">|</li>
ATagBeforeWrap = 1
linkWrap = | <b class="caret"></b>
ATagParams = class="dropdown-toggle" data-toggle="dropdown"
}
ACTIFSUB < .IFSUB
ACTIFSUB {
allWrap = <!!==:>|
}
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu" role="menu" aria-labelledby="dLable">|</ul>
expAll = 1
NO = 1
NO {
allWrap = <li>|</li>
stdWrap.htmlSpecialChars = 1
}
ACT < .NO
ACT.ATagParams = class="active"
ACT.allWrap = <li class="active">|</li>
IFSUB < .NO
IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
IFSUB.linkWrap = | <b class="caret"></b>
IFSUB.ATagBeforeWrap = 1
ACTIFSUB < .IFSUB
ACTIFSUB {
allWrap = <!!==:>|
}
3 = TMENU
3 {
wrap = <ul class="dropdown-menu" role="menu" aria-labelledby="dLable">|</ul>
expAll = 1
NO = 1
NO.allWrap = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1
ACT < .NO
ACT.ATagParams = class="active"
ACT.allWrap = <li class="active">|</li>
}
}
}
lib.title_banner = IMAGE
lib.title_banner {
file {
import.data = levelmedia:-1, slide
treatIdAsReference = 1
import.listNum = 0
}
}
You have to use wrapItemAndSub instead of allWrap if you want to have the <li> tags around the whole submenu.
In general you should first create a working HTML markup and then use TypoScript to generate exactly that markup.
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.
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;
}
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>
}
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>
}
}
}