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,我只能看到一级菜单,没有Drop Down,也没有第三级。生成的代码如下:
<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 紧随其后,但据我所知应该在第二级和第三级菜单之后关闭。
我在这个 Nerd 场景中还很陌生 ;-) 所以如果我做错了什么,请道歉。如果有人可以帮助,那将是很棒的,现在正在解决这个问题……好几天了。 :-)
只有部分答案,针对第一级菜单的问题:您正在使用 allWrap
添加 <li>
标签,它只包装菜单项,不包装子菜单。请改用 wrapItemAndSub
,就像您在第二级菜单中所做的那样。 Link to documentation.
此外,TypoScript 中的一些缩进会很好。
@Jost:我终于找到了 post 带有缩进代码的正确位置! :-)
这是完美运行的最终 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]
得到以下 - 减少到最低限度 - 代码:
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,我只能看到一级菜单,没有Drop Down,也没有第三级。生成的代码如下:
<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 紧随其后,但据我所知应该在第二级和第三级菜单之后关闭。
我在这个 Nerd 场景中还很陌生 ;-) 所以如果我做错了什么,请道歉。如果有人可以帮助,那将是很棒的,现在正在解决这个问题……好几天了。 :-)
只有部分答案,针对第一级菜单的问题:您正在使用 allWrap
添加 <li>
标签,它只包装菜单项,不包装子菜单。请改用 wrapItemAndSub
,就像您在第二级菜单中所做的那样。 Link to documentation.
此外,TypoScript 中的一些缩进会很好。
@Jost:我终于找到了 post 带有缩进代码的正确位置! :-)
这是完美运行的最终 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]