Typoscript HMENU下拉菜单不起作用， <li> -标记关闭得早
[英]Typoscript HMENU drop down is not working, <li>-Tag closes to early
问题描述
得到了以下内容-减少到最少-代码：
CSS：
html { height: 100%; } body { height: 100%; font-size: 1.5em; line-height: 1.5; font-family: Arial, Verdana, Helvetica, sans-serif; } a, a:link, a:active, a:visited { color: #e23427; text-decoration: none; } li { list-style: none; } /**1. Ebene Hauptnavigation**/ ul.topNav { float: left; width: 700px; margin: 100px 0 0 40px; } ul.topNav li { float: left; position: relative; } ul.topNav li a.tmp { color: inherit; float: left; height: 20px; padding: 0 10px; } ul.topNav li a:hover.tmp, ul.topNav li.active a.tmp, ul.topNav li:hover a.tmp { border-bottom: 2px solid #e23427; padding-bottom:10px; color: #e23427; } /**2. Ebene Hauptnavigation**/ ul.topNav li ul { display: none; position: absolute; width: 190px; top: 32px; left: -2px; padding: 5px 2px 2px 2px; } ul.topNav li:hover ul { display: block; } ul.topNav li ul li { float: none; display: block; width: 190px; height: auto; vertical-align: middle; } ul.topNav li ul li a { display: block; color: #231f20; width: 146px; padding: 6px 22px; } ul.topNav li ul li a:hover, ul.topNav li ul li a.active { color: red; } /***3. Ebene Hauptnavigation***/ ul.topNav li:hover ul li ul { display: none; position: absolute; width: 190px; left: 188px; padding: 0 2px 2px 2px; margin-top: -32px; } ul.topNav li.eb3Left:hover ul li ul { left: -192px; } ul.topNav li a:hover ul li ul { display: none; } ul.topNav li ul li ul { display: none; } ul.topNav li ul li:hover ul { display: block; }
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style/testCssNavigation.css" media="screen" /> </head> <body> <div> <ul class="topNav"> <li><a href="" class="tmp">Company</a> <ul> <li><a href="">Facts</a></li> <li><a href="">Overview</a></li> <li><a href="">Management</a></li> </ul> </li> <li><a href="" class="tmp">Products</a> <ul> <li><a href="">Product Line</a> <ul> <li><a href="">Product1</a></li> <li><a href="">Product2</a></li> <li><a href="">Product3</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
如您所见，效果很好：第一级，第二级和第三级。
通过将其集成到Typo3中，我为菜单编写了以下TS：
## Menu [Begin]
lib.mainnav = HMENU
lib.mainnav {
entryLevel = 1
1 = TMENU
1 {
wrap = <ul class="topNav">|</ul>
expAll = 1
noBlur = 1
##Menuelements normal
NO = 1
NO.allWrap = <li>|</li>
NO.ATagParams = class="tmp"
NO.stdWrap.htmlSpecialChars = 1
CUR = 1
CUR.allWrap = <li>|</li>
CUR.ATagParams = class="tmp"
CUR.stdWrap.htmlSpecialChars = 1
}
2 = TMENU
2 {
wrap = <ul>|</ul>
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1
CUR = 1
CUR.wrapItemAndSub = <li>|</li>
CUR.stdWrap.htmlSpecialChars = 1
ACT = 1
ACT < .CUR
}
## referenz auf ebene 2, alles wie ebene 2
3 < .2
3.wrap = <ul>|</ul>
}
## Menu [End]
通过Typo3，我只能看到第一级菜单，没有下拉菜单，也没有第三级菜单。 生成的代码如下：
<div> <ul class="topNav"> <li> <a href="index.php?id=112" class="tmp">Company</a> </li> <ul> <li> <a href="index.php?id=119">Facts</a> </li> <li> <a href="index.php?id=120">Overview</a> </li> <li> <a href="index.php?id=121">Management</a> </li> </ul> <li> <a href="index.php?id=114" class="tmp">Products</a> </li> <ul> <li> <a href="index.php?id=126">Product Line</a> </li> </ul> </ul> </div>
据我所知，第三级菜单完全丢失，并且第一级之后紧接有一个-Tag，但应该在第二级和第三级菜单之后关闭。
我在这个书呆子场景中还很新；-)所以，如果我做错了什么，请表示歉意。 如果有人能久了，那么现在就为这个问题而努力工作……好几天了。 :-)
2 个解决方案
解决方案1
1 已采纳 2015-03-06 08:54:45
对于第一个菜单级别的问题，只有部分答案：您正在使用allWrap添加<li>标记，该标记仅包装菜单项，而不包装子菜单。 就像在第二个菜单级别上一样，使用wrapItemAndSub 。 链接到文档 。
另外，TypoScript中的一些缩进也会很好。
解决方案2
0 2015-03-06 19:23:10
@Jost：终于找到了缩进代码的正确位置！ :-)
这是完美运行的最终TS代码：
## Menu [Begin] lib.mainnav = HMENU lib.mainnav { entryLevel = 1 1 = TMENU 1 { wrap = <ul class="topNav">|</ul> expAll = 1 noBlur = 1 NO.wrapItemAndSub = <li>|</li> NO.ATagParams = class="tmp" } 2 = TMENU 2 { wrap = <ul>|</ul> expAll = 1 noBlur = 1 NO.wrapItemAndSub = <li>|</li> } 3 = TMENU 3 { wrap = <ul>|</ul> expAll = 1 noBlur = 1 NO.wrapItemAndSub = <li>|</li> } } ## Menu [End]
下拉菜单和 <li> 标签
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.