CODEWITHSUNDEEP
typo3typoscriptdropdown
sebi
sebi

Reputation: 47

Dropdown menu not working Typo3

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 <a href="#">..</a> , 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 
   }
 }

Upvotes: 0

Views: 1083

Answers (2)

sebi
sebi

Reputation: 47

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 = |&nbsp;<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 = |&nbsp;<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
                }
}

Upvotes: 2

pgampe
pgampe

Reputation: 4578

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.

Upvotes: 0

Related Questions