mit HMENU ein Untermenü erstellen

In diesem Artikel wird gezeigt, wie man ein Untermenü mit HMENU erstellt.

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