带有子页面的排版导航 [英] Typoscript navigation with subpages
问题描述
我正在尝试使用排版文字实现我的导航,但我在理解如何正确换行方面遇到问题.
I am trying to implement my navigation with typoscript and I am having problems to understand how to wrap right.
我已经有一个可以正常工作的 1 级基础导航.现在我的页面有子页面,而其他页面没有.对于没有子页面的那些,我想要我现在拥有的行为.对于带有子页面的页面,我想将其添加为下拉菜单.
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.
HTML 代码应如下所示.
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=""><a href="#">DropwDownItem1</a></li>
</ul>
</li>
<li class="active"><a href="#">Test1</a></li>
<li><a href="#about">Test2</a></li>
<li><a href="#contact">Test3</a></li>
</ul>
打字稿:
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>
}
}
//我已经更改了代码,但是现在当我点击下拉菜单中的一个项目时,ul class="dropdown-menu" 被包装了两次并且下拉菜单没有正确显示.
// 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.
推荐答案
选项 noBlur 从 TYPO3 v6.0 开始被删除,我在某处读到,RO 状态用 javascript 执行某些操作来显示/隐藏子菜单 - 所以我尝试不使用它.我宁愿通过 css 进行显示/隐藏.
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.
我会这样做:
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>
}
}
通过 CSS 添加悬停效果:
Add the hover-effect via CSS:
.nav ul {
display: none;
}
.nav li:hover ul {
display: block;
}
这篇关于带有子页面的排版导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!