drucken :: thefox : 15.05.2011
mit HMENU ein Hauptmenü erstellen
In diesem Artikel wird gezeigt, wie man ein Hauptmenü mit HMENU erstellen kann.
# Hauptmenu
lib.mainmenu = COA
lib.mainmenu {
10 = HMENU
10 {
# einstiegs level
entryLevel = 0
1 = TMENU
1 {
wrap = <ul id="menu1" class="menu">|</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>
}
CUR < .NO
CUR = 1
CUR {
wrapItemAndSub = <li class="cur first">|</li>|*|<li class="cur">|</li>|*|<li class="cur last">|</li>
}
ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="act first">|</li>|*|<li class="act">|</li>|*|<li class="act last">|</li>
}
}
}
}
Ein HMENU als Hauptmenü
ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.menu li {
float: left;
}
ul.menu li a {
padding: 1px 5px;
text-decoration: none;
}
#menu1 {
position: absolute;
left: 20px;
bottom: -1px;
z-index: 1;
}
#menu1 li {
margin: 0 0 0 1px;
}
#menu1 li a {
display: block;
padding: 5px 12px;
border: 1px solid #999;
background: #f6f6f6;
color: #333;
font-size: 1.3em;
}
* html #menu1 li a { /* IE6 */
width: 1%;
zoom: 1;
}
#menu1 li.cur a,
#menu1 li.act a,
#menu1 li a:hover {
border-bottom-color: #fff;
background: #fff;
color: #000;
}
#menu1 li a:focus {
background: #fff;
color: #CC0033;
}
CSS Beispiel Code - eine minimal Version von dieser Seite