子菜单未在 typo3 中正确列出
Sub menu is not listing properly in typo3
我正在用 typo3 创建分层菜单。我需要在第 1 级和第 2 级的 ul
标记之前添加一些其他元素,例如 div
。我创建了如下菜单
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
}
但现在二级菜单在关闭 <li>
标签后进入一级菜单
现在我得到 html 作为
<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>
我是 Typo3 的新手。我不确定我需要在哪里更改设置
您定义了一个多级菜单。并且您使用换行符将子菜单包含在当前 menu-entry (wrapItemAndSub
).
您还为整个菜单定义了外部 UL
-标签,而不仅仅是为顶层菜单。
如果您有多个页面和一个子页面,您还可以考虑菜单的外观。
+-page-1
| +-page-1.1
| +-page-1.2
+-page-2
+-page-2.1
+-page-2.2
如果这会导致:
<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>
你只需要包装一个 UL
标签(整个菜单)
用 LI
-tag
包装独立于关卡的每个项目
不要使用 .wrapItemAndSub
而只是一个普通的 .wrap
你甚至可以有其他结果。但你不能(在一个菜单中):
<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>
因为子项直接插入到它们的父项之后。
我正在用 typo3 创建分层菜单。我需要在第 1 级和第 2 级的 ul
标记之前添加一些其他元素,例如 div
。我创建了如下菜单
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
}
但现在二级菜单在关闭 <li>
标签后进入一级菜单
现在我得到 html 作为
<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>
我是 Typo3 的新手。我不确定我需要在哪里更改设置
您定义了一个多级菜单。并且您使用换行符将子菜单包含在当前 menu-entry (wrapItemAndSub
).
您还为整个菜单定义了外部 UL
-标签,而不仅仅是为顶层菜单。
如果您有多个页面和一个子页面,您还可以考虑菜单的外观。
+-page-1
| +-page-1.1
| +-page-1.2
+-page-2
+-page-2.1
+-page-2.2
如果这会导致:
<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>
你只需要包装一个 UL
标签(整个菜单)
用 LI
-tag
包装独立于关卡的每个项目
不要使用 .wrapItemAndSub
而只是一个普通的 .wrap
你甚至可以有其他结果。但你不能(在一个菜单中):
<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>
因为子项直接插入到它们的父项之后。