Beispiel:Html+css+js Dropdownmenu für Tasten.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Demo: Multilevel-Dropdown-Menu</title>
<style>
html, body{ font-size:16px; line-height:1.5; }
body{ margin:2em; }
pre {background:#eee;}
</style>
<style type="text/css">
/* 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 #ccc;
}
/* MSIE8 -- verstehen die Farbe transparent nicht */
:root #nav > li {
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; border: 1px solid #ccc; } /* MSIE 7 fix*/
/* Die Focus-Linie verbergen, sie wird durch passenden Hintergrund kompensiert */
#nav *:focus {
outline-width:0;
}
/* Die Menu-Gestaltung*/
#nav {
text-align:center;
/* Schatteneffekte */
-moz-box-shadow:0px 6px 10px -5px #666, inset 0px -8px 8px -7px #000, inset 0px 4px 8px -7px #666;
-webkit-box-shadow:0px 6px 10px -5px #666, inset 0px -8px 8px -7px #000, inset 0px 4px 8px -7px #666;
box-shadow:0px 6px 10px -5px #666, inset 0px -8px 8px -7px #000, inset 0px 4px 8px -7px #666;
}
#nav > li > a {
padding: 5px 10px;
/* Schatteneffekte */
-moz-box-shadow:inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
-webkit-box-shadow:inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
box-shadow:inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
}
/* 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;
/* Schatteneffekte */
-moz-box-shadow:3px 5px 10px #666;
-webkit-box-shadow:3px 5px 10px #666;
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;
/* den obersten Level verzögert einblenden */
-moz-transition-property: left; /* ab FX 4.0 */
-moz-transition-delay: 0.3s;
}
#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>Warum eine Keyboard Steuerung?</h2>
<p>Bei Dropdown-Menus wird die Keyboard-Steuerung meist vernachlässigt.
Sobald aber CSS aktiviert ist, wird eine ganze Gruppe von Menschen vernachlässigt:
Leute mit Sichtbehinderungen und Leute, welche die Maus nicht bedienen können.
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.
</p>
<p>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.
Sie 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>
<h2>Demo</h2>
<p><a href="#textlink_ohne_tabindex_vor_navi">Testlink ohne Tabindex</a></p>
<p><a tabindex="1" href="#textlink_mit_tabindex_1_vor_navi">Testlink Tabindex 1</a></p>
<ul id="nav">
<li><a>Menu 1</a>
<ul class="level1">
<li><a href="#menu_1_1">Menu 1.1</a></li>
<li><a href="#menu_1_2">Menu 1.2</a></li>
<li><a href="#menu_1_3">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">Menu 2.1.1</a></li>
<li><a href="#menu_2_1_2">Menu 2.1.2</a></li>
<li><a href="#menu_2_1_3">Menu 2.1.3</a></li>
<li><a href="#menu_2_1_4">Menu 2.1.4</a></li>
</ul>
</li>
<li><a>Menu 2.2</a>
<ul class="level2">
<li><a href="#menu_2_2_1">Menu 2.2.1</a></li>
<li><a href="#menu_2_2_2">Menu 2.2.2</a></li>
<li><a href="#menu_2_2_3">Menu 2.2.3</a></li>
<li><a href="#menu_2_2_4">Menu 2.2.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="current dir">Menu 3</a>
<ul class="level1">
<li><a href="#menu_3_1">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">Menu 3.2.1.1</a></li>
<li><a href="#menu_3_2_1_2">Menu 3.2.1.2</a></li>
<li><a href="#menu_3_2_1_3">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">Menu 3.2.3</a></li>
<li><a href="#menu_3_2_4">Menu 3.2.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#menu_4">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><a href="#textlink_ohne_tabindex_nach_navi">Testlink ohne Tabindex</a></p>
<p><a tabindex="1" href="#textlink_mit_tabindex_1_nach_navi">Testlink Tabindex 1</a></p>
<h2>Leistung und Beschränkungen.</h2>
<ul>
<li>Beliebig viele Unterlevel. Aus Usability-Gründen sollte man sparsam mit Levels umgehen.
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. für flexibleres Styling</li>
<li>Unterstützung für Browser, welche :hover nicht auf alle Elemente anwenden (zB. MSIE6)</li>
</ul>
<h2>Kompatibilität</h2>
<ul>
<li>FX 3.6 OK</li>
<li>Opera 9.5 OK, keine Schatten</li>
<li>Opera 11 OK, Shift Arrow statt TAB-Taste ohne Bezug auf tabindex</li>
<li>MSIE 8: OK, keine Pfeilsymbole, kein Schatten</li>
<li>MSIE 7 via MSIE 8 getestet: fast OK, keine Pfeilsymbole, leichte Layoutänderungen .<br>Bei onmouseout aus dem letzen Item bleibt das Menu stehen.</li>
<li>MSIE 6: braucht dringend weitere Fixes, float statt inline-block</li>
</ul>
<h2>Anleitung</h2>
<h3>Zum Code</h3>
<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>
<p>Beispiel</p>
<pre><code lang="x-html"><ul id="your_nav_id">
<li>
<a class="current dir">Label (in Path to current page)</a>
<ul class="level1">
<li>
<ul class="level2">
<li><a href="#">Link</a></li>
<li><a class="current page">Current Page</a></li>
</ul>
</li>
<li><a>Label</a>
...
</li>
</ul>
</li>
</ul>
</code></pre>
<h3>Zum Scriptaufruf</h3>
<p>Sie können das Script pro Navigation aufrufen. Sie übergeben:</p>
<ol>
<li>Die Id der Navigation.</li>
<li>Einen Integerwert für den Tabindex</li>
</ol>
<script type="text/javascript">
function addUsabilityToMenu(id, tabindex){
var items = document.getElementById(id).getElementsByTagName("a");
for( var i=0; i < items.length; i++ ){
items[i].tabIndex = tabindex;
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="";
}
}
}
};
}
}
addUsabilityToMenu("nav", 1);
</script>
</body>
</html>
