mit HMENU ein Hauptmenü erstellen

In diesem Artikel wird gezeigt, wie man ein Hauptmenü mit HMENU erstellen kann.

Typoscript Code


# 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ü

CSS Code


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