nicht angemeldet
Es steht noch ein Test aus für folgende Browser
MSIE6 Safari xy
Tests bitte mit und ohne JS. Tests mit der TAB-Taste.
mfg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Demo: Multilevel-Dropdown-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, nav * {
font-size:14px;
line-height:20px;
color:#000;
background:#fff;
text-align:left;
}
/* Alle Labels (a ohne href Attr) und Links haben ein bestimmtes uniformes aussehen */
#nav a{
display:block;
background:#fff;
padding: 0 5px 0 10px;
}
* html #nav >li > a { width:6em; } /* Fix für MSIE 6 ? */
* html #nav ul a { width: 9em;} /* Fix für MSIE 6 ? */
*+html #nav >li > a { width:6em; } /* Fix für MSIE 7 */
*+html #nav ul a { width: 9em;} /* Fix für MSIE 7 */
/* alle aktivierbaren Links haben bestimmte Farben */
#nav a[href] {
text-decoration:none;
color:#f00;
}
/* Die immer sichtbare Menu-Items */
#nav > li {
display:inline;
display:inline-block;
vertical-align:top;
border:1px solid #transparent;
}
* html #nav li { float:left; zoom:1; border: 1px solid #ccc; } /* MSIE 6 fix ?? */
* html #nav ul li { float:none; display:block } /* MSIE 6 fix ?? */
*+html #nav > li {display:inline; zoom:1; border: 1px solid #ccc; } /* MSIE 7 fix*/
/* Die Focus-Linie verbergen, sie wird durch passenden Hintergrund kompensiert */
#nav *:focus {
outline:0;
}
/* Die Menu-Gestaltung*/
#nav {
text-align:center;
-moz-box-shadow:0px 6px 10px -5px #666, inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
}
#nav > li > a {
-moz-box-shadow:inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
padding: 5px 10px;
}
/* Alle Levels erhalten ein einheitliches Bild */
/* Jeder Level wird absolut positioniert und hat eine definierte Mindestbreite: */
#nav ul {
position:absolute;
min-width:10em;
border:1px solid #ccc;
text-align:left;
-moz-box-shadow:3px 5px 10px #666;
}
/* 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:30px;
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;
outline:1px solid #f90;
outline-width:2px;
outline-offset:2px;
position:relative;
z-index:20;
}
#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>
<h2>Leistung und Beschränkungen.</h2>
<ul>
<li>Beliebig viele Unterlevel. Aus usabilitygründen sollte man eigentlich gar keine Levels verwenden.
Praktisch sallte man sich auf maximal zwei beschränken.
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>Markup für das aktuelle Document und den Pfad zum aktuellen Document.</li>
<li>Individuelle Klassen für jeden Level.</li>
<li>Unterstützung für Browser, welche :hover nicht auf alle Elemente anwenden (zB. MSIE6)</li>
</ul>
<h2>Der Stand der Dinge</h2>
<ul>
<li>FX 3.5 OK</li>
<li>Opera 9.5 OK</li>
<li>MSIE 8: OK, keine Pfeilsymbole</li>
<li>MSIE 7: OK keine Pfeilsymbole, leichte Layout,änderungen </li>
<li>MSIE 6: ohne Garantie, float statt inline-block</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>Menu 2.1</a>
<ul class="level2">
<li><a href="">Menu 2.1.1</a></li>
<li><a href="">Menu 2.1.2</a></li>
<li><a href="">Menu 2.1.3</a></li>
</ul>
</li>
<li><a>Menu 2.2</a>
<ul class="level2">
<li><a href="">Menu 2.2.1</a></li>
<li><a href="">Menu 2.2.2</a></li>
<li><a href="">Menu 2.2.3</a></li>
</ul>
</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>
<h2>Zum Code</h2>
<ul>
<li>Verwenden Sie in jedem li-Element ein a-Element ohne href Attribut, wenn es sich um ein Label handelt.</li>
<li>Für das aktuell angezeigte Doc schreiben sie die Klasse "current page" in das a-element.</li>
<li>Für Labels, die den Pfad zum aktuell angezeigte Doc angeben, schreiben sie die Klasse "current dir" in das a-element.</li>
</ul>
<h2>Warum eine Keyboard Steuerung?</h2>
<p>Die meisten, die Dropdown-Menus verwenden, machen sich um Keyboard-Steuerung keine Mühe.
Ein Anwender, der nicht gerade einen Screenreader verwendet, bemerkt da nichts, wenn bei der TAB Taste scheinbar nichts geschieht.
Die fehlende Implementierung von Keyboardsteuerung für Dropdown-Menus.ist typisch, da für den Laien nicht ohne weiteres machbar.
Accessibility-Puristen vermeiden deshalb solche Menus. <br>
Doch das muss nicht so bleiben, denn die hiessige Steuerung funktioniert doch recht gut.
Sie darf als akzeptable Zwischenlösung gelten, bis mit dem CSS die neuen Eigenschaften für die Navigation implementiert werden.
Die vorliegende Lösung restauriert die für normale Linklisten verfügbare Funktionalität der TAB-Taste. Sie restauriert damit ein Stück Konvention oder Erwartung.
</p>
<p>Die vorliegende Lösung möchte allerdings keinen Freibrief für wild verschachtelte Menulisten schreiben.
Auch wenn hier eine Tastaturlösung vorliegt, sollte man dem Mausbenutzer nie mehr als zwei Klapplevel abverlangen.</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>
Gunnar Bittersmann