Rootline
- Sie sind hier
- cObject
- HMENU
- mit HMENU ein Untermenü erstellen
mit HMENU ein Untermenü erstellen
In diesem Artikel wird gezeigt, wie man ein Untermenü mit HMENU erstellt.
Inhalt
Typoscript Code
# Submenu
lib.submenu = COA
lib.submenu {
10 = HMENU
10 {
# einstiegs level
entryLevel = 1
1 = TMENU
1 {
wrap = <ul id="menu3" class="submenu level1">|</ul>
expAll = 0
# kein onfocus="blurLink(this);" bei den links, sonst Tabulator Probleme im IE
noBlur = 1
NO {
wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle {
field = abstract // title
htmlSpecialChars = 1
}
ATagParams.cObject = TEXT
ATagParams.cObject {
value = class="item{field:uid}"
insertData = 1
}
}
CUR < .NO
CUR = 1
CUR {
wrapItemAndSub = <li class="cur first">|</li>|*|<li class="cur">|</li>|*|<li class="cur last">|</li>
ATagParams.cObject.value = class="cur item{field:uid}"
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="act first">|</li>|*|<li class="act">|</li>|*|<li class="act last">|</li>
ATagParams.cObject.value = class="act item{field:uid}"
}
}
2 < .1
2 {
wrap = <ul class="level2">|</ul>
}
}
}
Ein HMENU als Submenü
CSS Code
#menu3 {
border-top: 1px solid #ccc;
margin: 20px 0 0 0;
padding: 0;
list-style-type: none;
}
*+html #menu3 { /* IE7 bugfix */
font-size: 0px;
zoom: 1;
}
#menu3 li {
float: none;
display: block;
width: 100%;
}
#menu3 li a {
padding: 1px 5px;
display: block;
border-bottom: 1px solid #ccc;
font-size: 1.3em;
color: #333;
text-decoration: none;
}
* html #menu3 li a { /* IE6 bugfix */
zoom: 1;
}
#menu3 li a.act {
color: #000000;
}
#menu3 li a.cur {
color: #CC0033;
}
#menu3 li a:hover,
#menu3 li a:focus {
background: #F6F6F6;
color: #CC0033;
}
/* level 2 */
#menu3 ul {
margin: 0;
padding: 0;
}
#menu3 .level2 li a {
padding-left: 15px;
}
Ein Beispiel für den passenden CSS Code