带引导的TYPO3第三个导航级别
带引导的TYPO3第三个导航级别
提问于 2017-11-24 22:27:58
我有下面的打字代码片段，这使我在引导下导航。
MENU = HMENU
MENU.entryLevel = 0
#NAVIMAIN.excludeUidList =
MENU {
1 = TMENU
1 {
expAll = 1
NO.allWrap = <li>|</li>
NO.ATagTitle.field = abstract // description // title
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
ACT.ATagTitle.field = abstract // description // title
IFSUB = 1
IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
IFSUB.after = <b class="caret"></b></a>
IFSUB.doNotLinkIt = 1
IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
IFSUB.ATagTitle.field = abstract // description // title
ACTIFSUB = 1
ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
ACTIFSUB.after = <b class="caret"></b></a>
ACTIFSUB.doNotLinkIt = 1
ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
ACTIFSUB.ATagTitle.field = abstract // description // title
wrap = <ul class="nav navbar-nav">|</ul>
}
2 = TMENU
2 {
expAll = 1
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
ACT.ATagTitle.field = abstract // description // title
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub = |
ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
ACTIFSUB.after = </li>
ACTIFSUB.doNotLinkIt = 1
ACTIFSUB.ATagTitle.field = abstract // description // title
NO.allWrap = <li>|</li>
NO.ATagTitle.field = abstract // description // title
IFSUB = 1
IFSUB.before = <li class="divider"></li><li class="nav-header">
IFSUB.after = </li>
IFSUB.doNotLinkIt = 1
IFSUB.ATagTitle.field = abstract // description // title
SPC = 1
SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>
wrap = <ul class="dropdown-menu">|</ul>
}我怎样才能把第三级的男子汉从第二级男子的下拉名单中增加？
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-25 07:48:27
Bootstrap的默认导航条只支持两个级别。我建议使用智能菜单jQuery来获得三个或更多个子级别。
适合于TYPO3的HMENU设置如下所示：
lib.bootstrap3-smartmenus = COA
lib.bootstrap3-smartmenus {
wrap = <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> | </div> </nav>
10 = COA
10 {
wrap = <div class="navbar-header"> | </div>
10 = COA
10 {
// hamburger icon:
wrap = <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | </button>
10 = TEXT
10.value = <span class="sr-only">Toggle navigation</span>
20 = TEXT
20.value = <span class="icon-bar"></span>
21 < .20
22 < .20
}
// company name/logo:
20 = TEXT
20.value = Project name
20.typolink {
parameter = http://www.example.org/
ATagParams = class="navbar-brand"
}
}
20 = COA
20 {
wrap = <div class="navbar-collapse collapse"> | </div>
10 = HMENU
10 {
wrap = <ul class="nav navbar-nav"> | </ul>
1 = TMENU
1 {
expAll = 1
NO = 1
NO {
ATagTitle.field = title
wrapItemAndSub = <li>|</li>
}
CUR < .NO
CUR {
wrapItemAndSub = <li class="active">|</li>
}
IFSUB = 1
IFSUB {
ATagTitle.field = title
ATagParams = class="sub-arrow"
linkWrap = |<span class="caret"></span>
ATagBeforeWrap = 1
wrapItemAndSub = <li>|</li>
}
CURIFSUB < .IFSUB
CURIFSUB {
wrapItemAndSub = <li class="active">|</li>
}
ACT < .CUR
ACTIFSUB < .CURIFSUB
SPC = 1
SPC {
// no divider, if first menu item on this level (using optionSplit):
wrapItemAndSub = <li class="dropdown-header">|</li> |*| <li class="divider"></li><li class="dropdown-header">|</li>
}
}
2 < .1
2 {
wrap = <ul class="dropdown-menu">|</ul>
}
3 < .2
4 < .3
}
}
}必须对标记进行一些更改(例如不再使用data-toggle="dropdown")。
除了默认的引导文件之外，还必须使用这些CSS和JavaScripts：
- jquery.smartmenus.bootstrap.css
- jquery.smartmenus.min.js
- jquery.smartmenus.bootstrap.min.js
我曾经创建过一个演示(包括这个信息) 这里。
编辑：--如果您想用所提供的示例扩展默认的引导导航栏，可以使用以下TypoScript设置。我成功地用Codepen示例的额外CSS测试了它。
它移除子级别中的插入符号元素，并添加所需的额外类。您可以根据需要调整类container/container-fluid和navbar-fixed-top。
这个TypoScript (以及上面的片段)还将处理TYPO3 (SPC)中的菜单分隔页，并且只添加Bootstrap的分隔元素，如果它不是页面树的这个分支的第一个子页面。
lib.navbar = COA
lib.navbar {
wrap = <nav class="navbar navbar-default"> <div class="container-fluid"> | </div> </nav>
10 = COA
10 {
wrap = <div class="navbar-header"> | </div>
10 = COA
10 {
// hamburger icon:
wrap = <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</button>
10 = TEXT
10.value = <span class="sr-only">Toggle navigation</span>
20 = TEXT
20.value = <span class="icon-bar"></span>
21 < .20
22 < .20
}
// company name/logo:
20 = TEXT
20.value = Project name
20.typolink {
parameter = http://www.example.org/
ATagParams = class="navbar-brand"
}
}
20 = HMENU
20 {
wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div>
1 = TMENU
1 {
expAll = 1
NO = 1
NO {
ATagTitle.field = title
wrapItemAndSub = <li>|</li>
}
CUR < .NO
CUR {
wrapItemAndSub = <li class="active">|</li>
}
ACT < .CUR
IFSUB = 1
IFSUB {
ATagTitle.field = title
ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
linkWrap = |<b class="caret"></b>
ATagBeforeWrap = 1
wrapItemAndSub = <li class="dropdown">|</li>
}
ACTIFSUB < .IFSUB
ACTIFSUB {
wrapItemAndSub = <li class="dropdown active">|</li>
}
CURIFSUB < .ACTIFSUB
}
2 < .1
2 {
// Adjust several classes for sublevels
wrap = <ul class="dropdown-menu multi-level">|</ul>
IFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li>
ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu active">|</li>
// Remove caret element (correct arrow is set with ::after pseudo element)
IFSUB.linkWrap >
ACTIFSUB.linkWrap >
CURIFSUB < .ACTIFSUB
SPC = 1
SPC {
// no divider, if first menu item on this level (using optionSplit):
wrapItemAndSub = <li class="dropdown-header">|</li> |*| <li class="divider"></li><li class="dropdown-header">|</li>
}
}
3 < .2
4 < .3
}
}请注意，包含子级别的页面不能以这种方式链接到TYPO3中的页面。您需要使用快捷页面，就像在导航的第一级上使用这些页面一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47480724
复制相关文章
相似问题
腾讯云开发者
