Search code examples
navigationtypo3typo3-11.x

Sub menu is not listing properly in typo3

I am creating a hierarchical menu in typo3. I need to add some other elements like div before ul tag in both 1st level and 2nd level. I have created menu as follows

lib.hamburgermenu = HMENU
lib.hamburgermenu {
special = directory
special.value = 12

wrap = <div class="o-desktop-menu__primary-wrapper"><ul class="o-desktop-menu__primary-list">|</ul></div>

1 = TMENU
1 {
    noBlur = 1
    expAll = 1

    NO = 1
    NO.wrapItemAndSub = <li class="m-menu-item m-menu-item--hidden o-desktop-menu__item">|</li>
    NO.ATagParams =  class="m-menu-item__text-wrap m-menu-item__text-wrap--animate-bottom-right o-desktop-menu__text-wrap animate-bottom-right"  
    NO.stdWrap.wrap = <span class="m-menu-item__title o-desktop-menu__title">|</span>
    NO.linkWrap = |<svg class="a-arrow-forward-icon m-menu-item__arrow-forward" viewBox="0 0 11 16" xmlns="http://www.w3.org/2000/svg"><path d="M7.01 7.72L.66 1.38l.7-.71 7.08 7.07-.71.7-6.62 6.62-.71-.71 6.61-6.62z" fill-rule="evenodd"></path></svg>
    NO.ATagBeforeWrap = 1


 }
2 = TMENU
2 {
    wrap = <div class="o-desktop-menu__secondary-wrapper"><ul class="m-secondary-menu-list o-desktop-menu__secondary-list">|</ul></div>
    
    expAll = 1

    NO = 1
    NO.wrapItemAndSub = <li class="m-menu-item m-menu-item--secondary m-secondary-menu-list__item o-desktop-menu__item m-menu-item--hidden">|</li>
    NO.ATagParams = class="m-menu-item__text-wrap m-menu-item__text-wrap--animate-bottom-right o-desktop-menu__text-wrap animate-bottom-right"
    NO.stdWrap.wrap = <span class="m-menu-item__title o-desktop-menu__title">|</span>
    NO.linkWrap = |<svg class="a-arrow-forward-icon m-menu-item__arrow-forward" viewBox="0 0 11 16" xmlns="http://www.w3.org/2000/svg"><path d="M7.01 7.72L.66 1.38l.7-.71 7.08 7.07-.71.7-6.62 6.62-.71-.71 6.61-6.62z" fill-rule="evenodd"></path></svg>
    NO.ATagBeforeWrap = 1
}

But now the second level menu is coming inside the primary menu after closing <li> tag

Now I am getting the html as

<nav role="navigation" aria-label="Main desktop menu overlay" class="o-desktop-menu o-desktop-menu--active">
    <div class="o-desktop-menu__wrapper" data-scroll-lock-scrollable="">                        
        <div class="o-desktop-menu__primary-wrapper">
          <ul class="o-desktop-menu__primary-list">
            <li class="m-menu-item o-desktop-menu__item">
               <a href="/johannes/who-we-are" class="m-menu-item__text-wrap m-menu-item__text-wrap--animate-bottom-right o-desktop-menu__text-wrap animate-bottom-right">
               <span class="m-menu-item__title o-desktop-menu__title">Who We Are</span>
               <svg class="a-arrow-forward-icon m-menu-item__arrow-forward" viewBox="0 0 11 16" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.01 7.72L.66 1.38l.7-.71 7.08 7.07-.71.7-6.62 6.62-.71-.71 6.61-6.62z" fill-rule="evenodd"></path>
               </svg>
           </a>
           <div class="o-desktop-menu__secondary-wrapper">
              <ul class="m-secondary-menu-list o-desktop-menu__secondary-list">
                <li class="m-menu-item m-menu-item--secondary m-secondary-menu-list__item o-desktop-menu__item">
                   <a href="/johannes/who-we-are/default-title" class="m-menu-item__text-wrap m-menu-item__text-wrap--animate-bottom-right o-desktop-menu__text-wrap animate-bottom-right">
                     <span class="m-menu-item__title o-desktop-menu__title">Our approach to complex work</span>
                     <svg class="a-arrow-forward-icon m-menu-item__arrow-forward" viewBox="0 0 11 16" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.01 7.72L.66 1.38l.7-.71 7.08 7.07-.71.7-6.62 6.62-.71-.71 6.61-6.62z" fill-rule="evenodd"></path>
                        </svg>
                    </a>
                </li>
              </ul>
           </div>
       </li>
      </ul>
    </div>   // but I am expecting secondary wrapper after this closing
  </div>
 </nav>

I am a newbie in Typo3. I am not sure where I need to change the settings

Solution

  • You defined a multilevel menu. and you used a wrap to include submenus in the current menu-entry (wrapItemAndSub).

    you also defined the outer UL-tag for the whole menu and not only for the top level.

    You also might consider how the menu may look if you have more than one page with one subpage.

    +-page-1
|  +-page-1.1
|  +-page-1.2
+-page-2
   +-page-2.1
   +-page-2.2

    if this should result in:

    <ul>
<li>page-1</li>
<li>page-1.1</li>
<li>page-1.2</li>
<li>page-2</li>
<li>page-2.1</li>
<li>page-2.2</li>
</ul>

    you need to wrap only one UL-tag (the whole menu)
    wrap every item independent from level with a LI-tag
    don't use .wrapItemAndSub but just an ordinary .wrap

    you even can have other results. but you can't have (in one single menu):

    <ul>
<li>page-1</li>
<li>page-2</li>
<li>page-1.1</li>
<li>page-1.2</li>
<li>page-2.1</li>
<li>page-2.2</li>
</ul>

    as subitems are inserted directly after their parent.