HTML5-Menü

Zurück zu Menüs-Seite.

TypoScript Setup

      
temp.nav = HMENU
temp.nav {
  special = directory
  special.value = 1
  wrap = <nav id="nav" aria-labelledby="mainnav" role="navigation">|</nav>
	1 = TMENU
	1 {
		wrap = <h2 id="mainnav" class="hidden">Hauptnavigation</h2><ul tabindex="0" role="tree">|</ul>
		expAll = 1
		noBlur = 1
		NO = 1
		NO {
			before.cObject = COA
			before.cObject {
				10 = TEXT
				10.value = <li id="
				20 = TEXT
				20 {
					field = title
					stdWrap {
						case = lower
						split {
							token.char = 32
							cObjNum = 1
							1 {
								current = 1
								wrap = |-
							}
						}
						substring = 0,-1
						wrap = |" tabindex="-1" role="treeitem">
					}
				}
			}
			wrapItemAndSub = |</li>
			stdWrap.prepend = COA
			stdWrap.prepend {
				10 = LOAD_REGISTER
				10 {
					tempN.data = register:L1N
					tempN.wrap = |+1
					L1N.data = register:tempN
					L1N.prioriCalc = 1
					L2N = 0
				}
				20 = COA
				20 {
					stdWrap.noTrimWrap = |<dfn class="hidden">|</dfn> |
					10 = TEXT
					10.data = register:L1N
					10.wrap = |
				}
			}
			ATagTitle.field = subtitle // title
			ATagBeforeWrap = 1
			linkWrap = |<span class="hidden">.</span>
		}
		IFSUB < .NO
		IFSUB {
			before.cObject.20.stdWrap.wrap = |" aria-expanded="false" tabindex="-1" role="treeitem">
			after.wrap = |<ul class="hidden" role="tree">
			wrapItemAndSub = |</ul></li>
		}
		ACTIFSUB < .NO
		ACTIFSUB {
			before.cObject.20.stdWrap.wrap = |" aria-expanded="true" tabindex="-1" role="treeitem">
			linkWrap = <em>|</em><span class="hidden">.</span>
			after.wrap = |<ul class="expanded" role="tree">
			wrapItemAndSub = |</ul></li>
		}
		CUR < .NO
		CUR {
			doNotLinkIt = 1
			linkWrap = <strong title="Die aktuelle Seite"><span class="hidden">Standort: </span>|<span class="hidden">. </span></strong>
		}
		CURIFSUB < .NO
		CURIFSUB {
			before.cObject.20.stdWrap.wrap = |" aria-expanded="true" tabindex="-1" role="treeitem">
			doNotLinkIt = 1
			linkWrap = <strong title="Die aktuelle Seite"><span class="hidden">Standort: </span>|<span class="hidden">. </span></strong>
			after.wrap = |<ul class="expanded" role="tree">
			wrapItemAndSub = |</ul></li>
		}
	}
	2 = TMENU
	2 {
		expAll = 1
		noBlur = 1
		NO = 1
		NO {
			wrapItemAndSub = <li tabindex="-1" role="treeitem">|</li>
			stdWrap.prepend = COA
			stdWrap.prepend {
				10 = LOAD_REGISTER
				10 {
					tempN.data = register:L2N
					tempN.wrap = |+1
					L1N >
					L2N.data = register:tempN
					L2N.prioriCalc = 1
					L3N = 0
				}
				20 = COA
				20 {
					stdWrap.noTrimWrap = |<dfn class="hidden">|</dfn> |
					10 = TEXT
					10.data = register:L1N
					10.wrap = |.
					20 = TEXT
					20.data = register:L2N
					20.wrap = |
				}
			}
			ATagTitle.field = subtitle // title
			ATagBeforeWrap = 1
			linkWrap = |<span class="hidden">.</span>
		}
		IFSUB < .NO
		IFSUB {
			after.wrap = |<ul class="hidden" role="tree">
			wrapItemAndSub = <li aria-expanded="false" tabindex="-1" role="treeitem">|</ul></li>
		}
		ACTIFSUB < .NO
		ACTIFSUB {
			after.wrap = |<ul role="tree">
			wrapItemAndSub = <li aria-expanded="true" tabindex="-1" role="treeitem">|</ul></li>
			linkWrap = <em>|</em><span class="hidden">.</span>
		}
		CUR < .NO
		CUR {
			doNotLinkIt = 1
			linkWrap = <strong title="Die aktuelle Seite"><span class="hidden">Standort: </span>|<span class="hidden">. </span></strong>
		}
		CURIFSUB < .NO
		CURIFSUB {
			after.wrap = |<ul role="tree">
			wrapItemAndSub = <li aria-expanded="true" tabindex="-1" role="treeitem">|</ul></li>
			doNotLinkIt = 1
			linkWrap = <strong title="Die aktuelle Seite"><span class="hidden">Standort: </span>|<span class="hidden">. </span></strong>
		}
	}
	3 < .2
	3 {
		noBlur = 1
		NO = 1
		NO {
			wrapItemAndSub = <li tabindex="-1" role="treeitem">|</li>
			stdWrap.prepend {
				10 {
					tempN.data = register:L3N
					L1N >
					L2N >
					L3N.data = register:tempN
					L3N.prioriCalc = 1
				}
				20 {
					20.wrap = |.
					30 = TEXT
					30.data = register:L3N
					30.wrap = |
				}
			}
		}
		CUR < .NO
		CUR {
			doNotLinkIt = 1
			linkWrap = <strong title="Die aktuelle Seite"><span class="hidden">Standort: </span>|</strong><span class="hidden">. </span>
		}
	}
}

# IE < 9
[browser = msie]&&[version= <9]
temp.nav.wrap = <div id="nav" aria-labelledby="mainnav" role="navigation">|</div>
[global]

# Firefox < 3
[browser = firefox]&&[version= <3]
temp.nav.wrap = <div id="nav" aria-labelledby="mainnav" role="navigation">|</div>
[global]

CSS für alle Browser

      
#nav {
	position: relative;
	float: left;
	width: 16em;
}
#nav .hidden {
	position: absolute;
	left: -9999em;
}

#nav ul {
	float: left;
	width: 100%;
	list-style: none;
	border: solid #eda;
	border-width: .1em .1em 0;
	background: #fff;
}
#nav li {
	float: left;
	width: 100%;      
}
#nav a,
#nav strong {
	display: block;
	padding: .2em 1em;
	text-transform: uppercase;
	text-decoration: none;
	border: solid #eda;
	border-width: 0 0 .1em;
	color: #423d2f;
}
#nav li ul {
	width: 100%;        
	border-width: 0;
}
#nav li li {
	width: 100%;
}
#nav li li a,
#nav li li strong {
	padding-left: 2em;
	text-transform: none;
}
#nav li li li a,
#nav li li li strong {
	padding-left: 3em;
	text-transform: lowercase;
}
#nav a:hover {
	background: #eda;
}
#nav em {
	font-style: italic;
	font-weight: bold;
}
#nav strong {
	font-weight: bold;
}

CSS für IE kleiner 8

      
<!--[if lte IE 7]><style type="text/css">
#nav a {
  min-height: 0;
}
* html #nav a {
  height: 1px;
}
* html #nav li {
  display: inline;
  zoom: 1;
  height /**/: 1px;
}
</style><![endif]-->

Emil-WebDesign.net

Nutzerfreundliches und zugängliches CSS-Webdesign

HTML5-Menü