Основа отзывчивого липкого меню typo3 hmenu - PullRequest
Новая
       18

Основа отзывчивого липкого меню typo3 hmenu

0 голосов
/ 16 сентября 2018

Я новичок в Typo3, Fluid и Typoscript, и я надеюсь, что кто-то может мне помочь ...

Я использую адаптивное липкое меню для проекта Typo3, которое можно найти здесь:

https://foundation.zurb.com/building-blocks/blocks/responsive-sticky-menu.html

Исходный код меню: 

<div data-sticky-container>
  <div data-sticky data-options="marginTop:0;">

    <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle="example-menu"></button>
      <div class="title-bar-title">Menu</div>
    </div>

    <div class="top-bar" id="example-menu">
      <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
        <li class="menu-text">Site Title</li>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical nested">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>

  </div>
</div>

Это исходный код детали внутри моего шаблона, содержащей переменную жидкости для меню "menuPrimary":

<div data-sticky-container>
            <div data-sticky data-options="marginTop:0;">

                <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <div class="top-bar" id="example-menu">
                    <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
                      <li class="menu-text">{labelSiteTitle -> f:format.raw()}</li>
                      {menuPrimary -> f:format.raw()}
                    </ul>
                </div>

            </div>
        </div>

Я хочу создать меню, содержащее два уровня: это примерная структура страниц и подстраниц.Это мой TypoScript:

10 = FLUIDTEMPLATE
10 {
file = fileadmin / templates / vorlage.html 

variables {  

  labelSiteTitle = TEXT  
  labelSiteTitle.value = Testseite  

  menuPrimary = HMENU  
  menuPrimary {  
    special = directory  
    special.value = 3  

    1 = TMENU  
    1 {  
      NO = 1  
      NO {  
        wrapItemAndSub = <li>|</li>  
      }  

    }  

    2 = TMENU  
    2 {  
      NO = 1  
      NO {  
        wrapItemAndSub = <li>|</li>  
      }  
    }  

  }  

  contentMain < styles.content.get

}

Так что же яделать неправильно?Я просто хочу, чтобы у меня было точно такое же меню, как и в новом блоке, найденном на https://foundation.zurb.com/building-blocks/blocks/responsive-sticky-menu.html.

Это моя структура страницы внутри Typo3: 

root
-main navigation
 |--Homepage
 |--News
 |--Private
 |--About Us
    |---Team
    |---blabla
    |---...

Большое спасибо за вашу помощь!

Это мой вывод в веб-интерфейсе: 

<div data-sticky-container>
            <div data-sticky data-options="marginTop:0;">

                <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <div class="top-bar" id="example-menu">
                    <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
                      <li class="menu-text">Testseite</li>
                      <li><a href="index.php?id=5">Homepage</a></li>
                      <li><a href="index.php?id=6">News</a></li>
                      <li><a href="index.php?id=7">Private</a></li>
                      <li><a href="index.php?id=8">About Us</a></li>
                    </ul>
                </div>

            </div>
        </div>

Это мой вывод после нажатия «О нас»: 

<div data-sticky-container>
            <div data-sticky data-options="marginTop:0;">

                <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <div class="top-bar" id="example-menu">
                    <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
                      <li class="menu-text">Testseite</li>
                      <li><a href="index.php?id=5">Homepage</a></li>
                      <li><a href="index.php?id=6">News</a></li>
                      <li><a href="index.php?id=7">Private</a></li>
                      <li><a href="index.php?id=8">About Us</a>
                          <li><a href="index.php?id=9">Team</a></li>
                          <li><a href="index.php?id=10">blabla</a></li>
                      </li>
                    </ul>
                </div>

            </div>
        </div>

1 Ответ

0 голосов
/ 16 сентября 2018

Ваш второй уровень не окутан <ul class="menu vertical nested">|</ul>.Я пока не знаю, решает ли это вашу проблему, но вы должны написать это так: 

...

1 = TMENU  
1 {  
  expAll = 1
  NO = 1
  NO {
    wrapItemAndSub = <li>|</li>
  }
  IFSUB = 1
  IFSUB.wrapItemAndSub = <li class="is-dropdown-submenu-parent opens-right">|</li>
}
2 = TMENU  
2 {  
  wrap = <ul class="menu vertical nested">|</ul>
  NO = 1  
  NO {  
    wrapItemAndSub = <li>|</li>  
  }  
}  
....
...