我正在尝试用typoscript实现我的导航,我遇到了解如何正确包装的问题。
我已经有一个基本导航,1级工作正常。 现在我的页面有子页面和其他没有的子页面。 对于没有子页面的人,我想要我现在的行为。 对于包含子页面的页面,我想将其添加为下拉菜单。
HTML代码应如下所示。
<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>
的TypoScript:
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”被包裹了两次并且下拉列表没有正确显示。
答案 0 :(得分:4)
从TYPO3 v6.0开始删除选项noBlur并且我在某处读取,RO状态用javascript来显示/隐藏子菜单 - 所以我尽量不使用它。我宁愿通过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添加悬停效果:
.nav ul {
display: none;
}
.nav li:hover ul {
display: block;
}
答案 1 :(得分:1)
你的subnavi的<ul>
包裹应该在TMENU
附近。我认为您不需要ATagBeforeWrap
,因为它只会在linkWrap
标记中生成<a>
。所以它应该看起来像这样(未经测试):
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
noBlur = 1
IFSUB = 1
IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
}
在这里你可以找到有关包装的好信息,不幸的是它是德语:http://jweiland.net/typo3/typoscript/wrap-moeglichkeiten-und-hierarchie-in-menues.html
顺便说一句:如果您使用的是TYPO3 6+,则删除noBlur设置。
---&GT;编辑:
我稍微缩短了你的代码,但我真的不能重现这个问题。对我来说它工作得很好。下拉列表中的li获得了下拉类。但我没有看到<ul class="dropdown-menu">
special = list
special.value = 3,2
1 = TMENU
1 {
wrap = <ul class="nav">|</ul>
expAll = 1
NO = 1
NO.wrapItemAndSub = <li class="">|</li>
RO < .NO
CUR < .NO
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 < .IFSUB
CURIFSUB < .IFSUB
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
expAll = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
答案 2 :(得分:0)
我用于内部网页链接的代码段
我使用了字幕字段进行内部导航。
例如:
<a href="#about>about</a> <a href="#ourservice">Ourservice</a>
menu.main_menu = HMENU
menu.main_menu {
#special = directory
#special.value = 2
1 = TMENU
1 {
wrap = <ul class="nav navbar-nav navbar-right">|</ul>
expAll = 1
noBlur = 1
NO = 1
NO {
doNotLinkIt = 1
allWrap.insertData = 1
allWrap = <li class="first menu-{field:uid}"><a href="#{field:subtitle}">|</a></li>
}
ACT < .NO
ACT {
ATagParams = class="active dropdown"
allWrap = <li class="active first menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
}
CUR < .NO
CUR {
ATagParams = class="parent_menu active"
allWrap = <li class="first active menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
}
}
}