Korrigierte Fassung von Beat, 17.01.2011 01:17

Korrigierte Fassung

Beat Homepage des Autors 17.01.2011 01:17

barrierefreiheit

Hier nun die korrigierte Fassung.

Bisher getestet auf FX 3.5, Opera 9.5, MSIE 8

Mich würden Rückmeldungen über Usability und andere kompatibilität freuen.
Bitte die TAB Taste testen.

Falls jemand etwas geschickteres als diese
parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.
kennt, wäre ich auch dankbar.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
   "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Demo: Multilevel-Menu</title>  
<style type="text/css" id="style">  
/* normalisieren */  
#nav, #nav ul, #nav li {  
	display:block;  
	margin:0;  
	padding:0;  
	list-style:none;  
}  
  
/* Generelle vererbbare Settings innerhalb des Menus */  
#nav {  
	font-size:16px;  
	line-height:24px;  
	color:#000;  
	background:#fff;  
}  
  
/* Alle Labels (a ohne href Attr)  und Links haben ein bestimmtes uniformes aussehen */  
#nav a{  
	display:block;  
	background:#fff;  
	padding: 0 5px;  
}  
  
/* alle aktivierbaren Links haben bestimmte Farben */  
#nav a[href] {  
	text-decoration:none;  
	color:#f00;  
}  
  
/* Die immer sichtbare Menu-Items */  
#nav > li {  
	display:inline;  /* Fix für bestimmte Browser */  
	display:inline-block;  
	position:relative;  
	vertical-align:top;	  
	border:1px solid #000;  
}  
  
/* Die Focus-Linie verbergen, sie wird durch passenden Hintergrund kompensiert */  
#nav *:focus {  
	outline:0;  
}  
  
/* Jeder Level wird absolut positioniert und hat eine definierte Mindestbreite: */  
#nav .level1, #nav .level2, #nav .level3, #nav .level4 {  
	position:absolute;  
	min-width:10em;  
}  
  
/* Alle Levels erhalten ein einheitliches Bild */  
#nav ul {  
	border:1px solid #000;  
}  
  
/* Jedes Item in jedem Level erzeugt einen neuen Koordinatenkontext */  
#nav li {  
	position:relative;  
}  
  
/* Der 1. Level erscheint vertikal unter den Menu-Labels */  
#nav .level1 {  
	top:24px;  
	left: -1999px; 	/* einblenden left:-1px;*/  
}  
  
/* Der 2. bis x. Level erscheint horizontal versetzt neben dem ersten Level */  
#nav .level2, #nav .level3, #nav .level4 {  
	top:-1px;  
	left:-1999px;	/*einblenden left:8em;*/  
}  
  
/* Den Menupfad zur aktuellen Seite hervorheben */  
#nav a.current{  
	background: #aaf;  
}  
  
/* Betone die im moment gehoverten Items */  
#nav a:hover, #nav li.hover >  a {  
	background: #ddd;  
}  
#nav a.current:hover, #nav li.hover >  a.current{  
	background: #aaf;  
}  
  
/* Gebe den Labels, die keine Links sind, Dropdown/right-Pfeil */  
#nav ul a:not([href]):not([class="current page"]):before {  
	float:right;  
	content: "\25b8";  /* Pfeil rechts */  
	padding-left:5px;  
}  
#nav > li > a:not([href]):not([class="current page"]):before {  
	float:right;  
	content: "\25be";  /* Pfeil runter */  
	padding-left:5px;  
}  
  
/* Wir korrigieren die z-index-Werte */  
.level1 { z-index:11; }  
.level2 { z-index:12; }  
.level3 { z-index:13; }  
.level4 { z-index:14; }  
  
/* Interaktives Einblenden  */  
#nav > li:hover .level1, #nav > li.hover .level1           { left:-1px; }  
#nav li:hover > .level2, #nav .level1 >li.hover .level2  { left:10em; }  
#nav li:hover > .level3, #nav .level2 >li.hover .level3  { left:10em; }  
#nav li:hover > .level4, #nav .level3 >li.hover .level4  { left:10em; }  
  
</style>  
</head>  
<body>  
<h1>Demo Multilevel-Dropdown-Menu</h1>  
<p>Es gibt praktische Limiten bei der Zahl der Level.</p>  
<ul>  
	<li>Aus usabilitygründen sollte man eigentlich gar keine Levels verwenden.</li>  
	<li>Ab dem zweiten Level beansprucht jeder Level weiteren horizontalen Platz. Dieser steht aber nicht unbedingt zur Verfügung.</li>  
	<li>Tastatur-Unterstützung für Keyboard (TAB-Taste) bis drei Sublevel.</li>  
	<li>Unterstützung für Browser, welche :hover nicht auf alle Elemente anwenden (zB. MSIE6)</li>  
</ul>  
<hr>  
<p>Der Stand der Dinge</p>  
<ul>  
	<li>FX 3.5 OK</li>  
	<li>Opera 9.5 OK</li>  
	<li>MSIE 8: OK</li>  
</ul>  
<hr>  
<ul id="nav">  
	<li><a>Menu 1</a>  
		<ul class="level1">  
			<li><a href="">Menu 1.1</a></li>  
			<li><a href="">Menu 1.2</a></li>  
			<li><a href="">Menu 1.3</a></li>  
		</ul>  
	</li>  
	<li><a>Menu 2</a>  
		<ul class="level1">  
			<li><a href="">Menu 2.1</a></li>  
			<li><a href="">Menu 2.2</a></li>  
		</ul>  
	</li>  
	<li><a class="current dir">Menu 3</a>  
		<ul class="level1">  
			<li><a href="">Menu 3.1</a></li>  
			<li><a class="current dir">Menu 3.2</a>  
				<ul class="level2">  
					<li><a>Menu 3.2.1</a>  
						<ul class="level3">  
							<li><a href="">Menu 3.2.1.1</a></li>  
							<li><a href="">Menu 3.2.1.2</a></li>  
							<li><a href="">Menu 3.2.1.3</a></li>  
						</ul>  
					</li>  
					<li><a class="current page">Menu 3.2.2</a></li>  
					<li><a href="">Menu 3.2.3</a></li>  
					<li><a href="">Menu 3.2.4</a></li>  
				</ul>  
			</li>  
		</ul>  
	</li>  
	<li><a href="">Menu 4</a></li>  
	<li><a>Grenzfall</a>  
		<ul class="level1">  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
			<li><a href="">Item</a></li>  
		</ul>  
	</li>  
	<li><a>Grenzfall</a>  
		<ul class="level1">  
			<li><a>Grenzfall Level1</a>  
				<ul class="level2">  
					<li><a>Grenzfall Level2</a>  
						<ul class="level3">  
							<li><a>Grenzfall Level3</a>  
								<ul class="level4">  
									<li><a>Grenzfall Level4</a></li>  
								</ul>  
							</li>  
						</ul>  
					</li>  
				</ul>  
			</li>  
		</ul>  
	</li>  
</ul>  
  
<p style="height:25em">Dieser Absatz ist lediglich zur besseren Visualisierung</p>  
<script type="text/javascript">  
function addUsabilityToMenu(id, tabindex){  
	var m = document.getElementById(id);  
	var items = m.getElementsByTagName("a");  
	for( var i=0; i < items.length; i++ ){  
		items[i].onmouseover = function(){  
			this.parentNode.className = "hover";  
		};  
		items[i].onmouseout = function(){  
			this.parentNode.className = "";  
		};  
		items[i].onfocus = function(){  
			this.parentNode.className = "hover";  
			if(this.parentNode.parentNode.parentNode.nodeName=="LI"){  
				this.parentNode.parentNode.parentNode.className="hover";  
				if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="LI"){  
					this.parentNode.parentNode.parentNode.parentNode.parentNode.className="hover";  
					if(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="LI"){  
						this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className="hover";  
					}  
				}  
			}  
		};  
		items[i].onblur = function(){  
			this.parentNode.className = "";  
			if(this.parentNode.parentNode.parentNode.nodeName=="LI"){  
				this.parentNode.parentNode.parentNode.className="";  
				if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="LI"){  
					this.parentNode.parentNode.parentNode.parentNode.parentNode.className="";  
					if(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="LI"){  
						this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className="";  
					}  
				}  
			}  
		};  
		items[i].tabIndex = tabindex;//i+11;  
	}  
}  
addUsabilityToMenu("nav", 1);  
</script>  
</body>  
</html>

mfg Beat

--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Beat: Korrigierte Fassung

Beitrag lesen

Korrigierte Fassung

Dropdown Menu rür Alle (Bitte testen)

Rückzug

Korrigierte Fassung

Ergebnis IE6 im IE-Tester

Ergebnis IE7 im IE-Tester

:after:after:after{}

neue aktuelle Version für Tests

Überlegungen

WIKI Live-Beispiel