Ergebnis IE7 im IE-Tester von Beat, 17.01.2011 12:07

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

Rückzug

Beat Homepage des Autors 16.01.2011 23:57

barrierefreiheit

– Informationen zu den Bewertungsregeln

War leider noch nichts:

Es ist ein Fehler, ein li onfocus zu behandeln.

Der konkrete Fehler ist, dass ein fokusiertes LI hier nicht den inneren Link aktivieren lässt. Ein wesentlicher Mangel.

Ich muss das ganze umstellen und das a Element behandeln.
Dadurch wird MSIE 6 ganz unter den Tisch fallen.

mfg Beat

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

Beitrag melden

– Informationen zu den Bewertungsregeln

Korrigierte Fassung

Beat Homepage des Autors 17.01.2011 01:17

barrierefreiheit

– Informationen zu den Bewertungsregeln

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

Korrigierte Fassung
Felix Riesterer Homepage des Autors 17.01.2011 01:41

barrierefreiheit
– Informationen zu den Bewertungsregeln
Lieber Beat,

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

vielleicht soetwas wie eine hasancestor-Funktion? In Deinem Fall braucht es wohl eher eine hasAncestorWithTagName-Funktion.

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
Beitrag melden

–
Informationen zu den Bewertungsregeln
Ergebnis IE6 im IE-Tester
Matthias Apsel Homepage des Autors 17.01.2011 11:16

barrierefreiheit
– Informationen zu den Bewertungsregeln
IE6: keine Funktion, menu 4 öffnet zudem den übergeordneten Ordner.

Matthias

--
Beitrag melden

–
Informationen zu den Bewertungsregeln