Dropdown Menu rür Alle (Bitte testen) von Beat, 16.01.2011 22:34

Dropdown Menu rür Alle (Bitte testen)

Beat Homepage des Autors 16.01.2011 22:34

barrierefreiheit

Darf ich alle Bitten, den folgenden Code zu testen
for allem ältere browser (MSIE6)

Allgemein würden Mich Rückmeldungen über die Usability freuen.

Das soll ein vorbildliches Dropdownmenu für das WIKI werden.

  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
   "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<style type="text/css">  
head {display:block; }  
title{display:block; padding:0.5em 1em; font-size:24px; font-weight:bold; border-bottom:1px solid black; background:#fff; }  
html{background:#ddd; padding:10px;}  
#style{display:block; white-space:pre; font-family:monospace;}  
body{background:#fff; margin:1em 0; border:2px solid #666;}  
body:before, body:after{display:block; color:#fff; background:#666; font-size:12px;}  
body:before{content:'<body>'; }  
body:after{content:'</body>'; }  
#comment {margin:1em;}  
</style>  
<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:#eee;  
	padding: 0 5px;  
	text-decoration:none;  
}  
  
/* Die aktuelle Seite wird hervorgehoben */  
#nav .current-page{ background: #99f; }  
  
/* Die immer sichtbare Labels */  
#nav > li {  
	display:inline;  /* Fix für bestimmte Browser */  
	display:inline-block;  
	position:relative;  
	vertical-align:top;	  
	border:1px solid #000;  
}  
  
/* Jeder Level wird absolut positioniert und hat eine definierte Mindestbreite: */  
#nav .level1, #nav .level2, #nav .level3, #nav .level4 {  
	position:absolute;  
	min-width:10em;  
}  
  
/* Jedes Item in jedem Level erzeugt einen neuen Koordinatenkontext */  
#nav li {  
	position:relative;  
}  
  
/* Alle Levels erhalten ein einheitliches Bild */  
#nav .level1, #nav .level2, #nav .level3, #nav .level4 {  
	border:1px solid #000;  
}  
  
/* 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;*/  
}  
  
/* Interaktives Einblenden */  
#nav > li:hover .level1, #nav .level1:hover  { left:-1px; }  
#nav .level1 >li:hover .level2, #nav .level2:hover  {left:8em;}  
#nav .level2 >li:hover .level3, #nav .level3:hover  {left:8em;}  
#nav .level3 >li:hover .level4, #nav .level4:hover  {left:8em;}  
  
#nav > li.hover .level1 { left:-1px; }  
#nav .level1 >li.hover .level2  {left:8em;}  
#nav .level2 >li.hover .level3  {left:8em;}  
#nav .level3 >li.hover .level4  {left:8em;}  
  
/* Betone die im moment gehoverten Items*/  
#nav a:not([class]):hover, #nav li.hover >  a:not([class]) {background: #ccc;}  
  
/* Gebe den Labels, die keine Links sind Hinweise auf erweiterbarkeit */  
#nav ul a:not([href]):not([class]):before { float:right;  content: "\25b8"; padding-left:5px; }  
#nav > li > a:not([href]):before { float:right; content: "\25be"; padding-left:5px; }  
  
/* Wir korrigieren noch die z-index-Werte */  
.level1 {z-index:11;}  
.level2 {z-index:12;}  
.level3 {z-index:13;}  
.level4 {z-index:14;}  
  
</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>  
  
<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>Menu 3</a>  
		<ul class="level1">  
			<li><a href="">Menu 3.1</a></li>  
			<li><a>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){  
	var m = document.getElementById(id);  
	var items = m.getElementsByTagName("li");  
	for( var i=0; i < items.length; i++ ){  
		items[i].onmouseover = function(){  
			this.className = "hover";  
		};  
		items[i].onmouseout = function(){  
			this.className = "";  
		};  
		items[i].onfocus = function(){  
			this.className = "hover";  
			if(this.parentNode.parentNode.nodeName=="LI"){  
				this.parentNode.parentNode.className="hover";  
				if(this.parentNode.parentNode.parentNode.parentNode.nodeName=="LI"){  
					this.parentNode.parentNode.parentNode.parentNode.className="hover";  
					if(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="LI"){  
						this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className="hover";  
					}  
				}  
			}  
		};  
		items[i].onblur = function(){  
			this.className = "";  
			if(this.parentNode.parentNode.nodeName=="LI"){  
				this.parentNode.parentNode.className="";  
				if(this.parentNode.parentNode.parentNode.parentNode.nodeName=="LI"){  
					this.parentNode.parentNode.parentNode.parentNode.className="";  
				if(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="LI"){  
					this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className="";  
				}  
				}  
			}  
		};  
		items[i].tabIndex=i+11;  
	}  
}  
addUsabilityToMenu("nav");  
</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: Dropdown Menu rür Alle (Bitte testen)

Beitrag lesen

Dropdown Menu rür Alle (Bitte testen)

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