nicht angemeldet Beat
Beat
cross
Beat
Beat
Beat
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.
suit
Gunnar Bittersmann
<!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
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
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
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.
IE6: keine Funktion, menu 4 öffnet zudem den übergeordneten Ordner.
Matthias
IE7 hat offensichtlich ein Problem mit dem z-index, mit inline-block ja sowieso, außerdem mit automatisch generiertem Inhalt, wobei gerade die Dreiecke wichtig wären. Die Einblendungen ersten Grades gehen auch nicht wieder weg.
Matthias
IE7 hat offensichtlich ein Problem mit dem z-index, mit inline-block ja sowieso, außerdem mit automatisch generiertem Inhalt, wobei gerade die Dreiecke wichtig wären. Die Einblendungen ersten Grades gehen auch nicht wieder weg.
Ich habe den MSIE8 jetz im MSIE7 Mode laufen. Dort wurde ein Fix angebracht. Ich habe auf raten hin zwei Fixes für MSIE6 implementiert (float statt inline-block) (definiere eine breite für a Elemente)
Ich wäre dankbar, wenn du das nochmals im MSIE 6 nochmals testen könntest.
<!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;
position:relative;
vertical-align:top;
border:1px solid #ccc;
}
* html #nav > li {float:left; zoom:1; } /* MSIE 6 fix ?? */
*+html #nav > li {display:inline; zoom:1; } /* 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</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>
Hallo,
ich habe einmal eine grundsätzliche Frage: Wie passt Javascript in Deinem Menü zur Barrierefreiheit? Imho gar nicht:
Zitat Wikipedia "Barrierefreies Internet":
Interaktive Schaltflächen per CSS
Oftmals werden Navigationen noch mit Hilfe von JavaScript oder mittels Plug-ins (z. B.: Adobe Flash) realisiert. Dies kann den Quelltext unnötig umfangreich machen und sperrt Benutzer aus, wenn zum Beispiel:
* deren Browser kein JavaScript unterstützen (z. B.: Lynx),
* die JavaScript-Unterstützung im Browser deaktiviert ist (z. B. aus Sicherheitsgründen),
* die benötigten Plug-ins nicht installiert sind
* oder der Nutzer durch eine Behinderung nicht in der Lage ist, die Navigation wahrzunehmen oder zu bedienen.
Bei den meisten Schaltflächen im Internet werden einfach nur Hintergrundfarbe oder -bild sowie Textfarbe und -dekoration ausgetauscht. Dies ist per CSS um ein Vielfaches einfacher und der Quelltext schrumpft (Bündelung von Formatangaben in Klassen). Dies verringert natürlich auch die Dokumentengröße, wodurch zugleich das Transfervolumen kleiner und die Seite schneller geladen wird. Durch eine Ausgliederung der CSS-Angaben in eine externe Datei können weitere Verbesserungen in Bezug auf Transfervolumen und Ladezeit erreicht werden, da die Formatierungen nur einmal – und nicht bei jedem neuen Aufruf – zum User übertragen werden müssen.
Zitat Ende
MfG
cross
ich habe einmal eine grundsätzliche Frage: Wie passt Javascript in Deinem Menü zur Barrierefreiheit? Imho gar nicht:
Trenne dich von dem gedanken, die deutschsprachige Wikipedia hätte vernünftige Informationen zum Thema Webentwicklung.
Die Informationen dort sind großteils hochgradig falsch, irreführend oder haarsträubend.
Zitat Wikipedia "Barrierefreies Internet":
Interaktive Schaltflächen per CSSOftmals werden Navigationen noch mit Hilfe von JavaScript oder mittels Plug-ins (z. B.: Adobe Flash) realisiert. Dies kann den Quelltext unnötig umfangreich machen und sperrt Benutzer aus, wenn zum Beispiel:
* deren Browser kein JavaScript unterstützen (z. B.: Lynx),
* die JavaScript-Unterstützung im Browser deaktiviert ist (z. B. aus Sicherheitsgründen),
* die benötigten Plug-ins nicht installiert sind
* oder der Nutzer durch eine Behinderung nicht in der Lage ist, die Navigation wahrzunehmen oder zu bedienen.Bei den meisten Schaltflächen im Internet werden einfach nur Hintergrundfarbe oder -bild sowie Textfarbe und -dekoration ausgetauscht.
Die Hintergrundfarbe oder eine Hintergrundfarbe zu tauschen ist NICHT Barrierefrei. Hintergrundfarben kann man deaktivieren, bei Menschen mit schwerden Farbfehlsichtigkeiten ist das oft der Fall. Dann hat man ein Problem, wenn keine Unterscheidung zwischen :hover und Normalzustand möglich ist.
Dies ist per CSS um ein Vielfaches einfacher und der Quelltext schrumpft (Bündelung von Formatangaben in Klassen).
Das fällt in die Kategorie haarsträubend bzw. Bullshit-Bingo.
Dies verringert natürlich auch die Dokumentengröße, wodurch zugleich das Transfervolumen kleiner und die Seite schneller geladen wird.
Und das macht eine Seite barrierefreier?
Durch eine Ausgliederung der CSS-Angaben in eine externe Datei können weitere Verbesserungen in Bezug auf Transfervolumen und Ladezeit erreicht werden, da die Formatierungen nur einmal – und nicht bei jedem neuen Aufruf – zum User übertragen werden müssen.
Aber das jetzt?
Zitat Ende
Übrigens gilt obenstehendes auch für Links die nur eine Änderung der Farbe beim :hover durchführen: FAIL.
Trenne dich von dem Irrglauben "JavaScript != Barrierefrei".
In der Tat ist ein ordentliches Menü durch JavaScript ergänzt (um z.B. eine ordentliche Tastaturnavigation zu ermöglichen) wesentlich Barriereärmer als eine auf biegen und brechen auf CSS-Only getrimmte Navigation die selbst mit der Maus schwer bedienbar ist, weil man mit aktuellen technischen mitteln kaum Animationen[!] oder Zeitverzögerung einbauen kann.
@@suit:
nuqneH
man mit aktuellen technischen mitteln kaum Animationen[!] oder Zeitverzögerung einbauen kann.
?? Die technischen Mittel sind in CSS 3 vorgesehen. Sie müssen nur in Browser implementiert werden. (Sind sie teilweise auch schon.)
Qapla'
man mit aktuellen technischen mitteln kaum Animationen[!] oder Zeitverzögerung einbauen kann.
?? Die technischen Mittel sind in CSS 3 vorgesehen.
Ja, aber nicht nicht fertig und nicht nicht flächendeckend in allen Browsern eingebaut.
Sie müssen nur in Browser implementiert werden. (Sind sie teilweise auch schon.)
Eben.
@@suit:
nuqneH
?? Die technischen Mittel sind in CSS 3 vorgesehen.
Ja, aber nicht nicht fertig und nicht nicht flächendeckend in allen Browsern eingebaut.
Muss man jeden Schnickschnack für alte Browser nachbauen oder sollte man sich mit progressive enhancement zufriedengeben?
Qapla'
Muss man jeden Schnickschnack für alte Browser nachbauen oder sollte man sich mit progressive enhancement zufriedengeben?
Das nicht, aber es gibt noch genug verbreitete Drecksbrowser die nicht "alt" sind - der Internet Explorer 8 z.B. oder der Firefox 3.6 :)
ich habe einmal eine grundsätzliche Frage: Wie passt Javascript in Deinem Menü zur Barrierefreiheit? Imho gar nicht:
Doch es passt schon.
Zitat Wikipedia "Barrierefreies Internet":
Interaktive Schaltflächen per CSS
Damit wir schlauere Information haben, betreiben wir ein eigenes viel relevanteres WIKI.
Oftmals werden Navigationen noch mit Hilfe von JavaScript oder mittels Plug-ins (z. B.: Adobe Flash) realisiert. Dies kann den Quelltext unnötig umfangreich machen und sperrt Benutzer aus, wenn zum Beispiel:
Mein vorgeschlagenes Menu basiert nicht auf javascript.
Leute mit Screenreader oder Leute, die die Maus schlecht bedienen können werden aber JS brauchen und es auch meistens aktiviert haben.
Mit JS-Verweigerung propagieren erzeugt man keine bessere Dropdown-Menus. Der Bedarf nach Dropdown Menus existiert aber dennoch.
Das Ziel meines Artikels wäre, jene Webdesigner, die ein Dropdown-Menu brauchen, nicht im Regen stehen lassen, sondern ihnen die cChance geben, dennoch WCAG Richtlinien erfüllen zu können.
Im übrigen hättest du ja mal das Script testen können, und dich auf das Relevante konzentrieren können, statt thematisch in ein idiskutables Nirvana zu manövrieren.
mfg Beat
Ich weiß nicht, was hier letzte Zeit für eine besch.. Diskussionskultur herrscht?! Jedermann, der hier mal eine andere Meinung vertritt, als die der gekrönten Häupter einer kleinen, aber sehr dominaten Gruppe in diesem Forum, bekommt gleich von mehreren Seiten verbal was auf die Fres...
Es macht keinen Spaß mehr, irgendwas hier zu posten.
Hi,
[...] Jedermann, der hier mal eine andere Meinung vertritt [...]
Was hat Wikipedia zitieren mit Meinung zu tun?
~dave
Ich weiß nicht, was hier letzte Zeit für eine besch.. Diskussionskultur herrscht?! Jedermann, der hier mal eine andere Meinung vertritt, als die der gekrönten Häupter einer kleinen, aber sehr dominaten Gruppe in diesem Forum, bekommt gleich von mehreren Seiten verbal was auf die Fres...
Welche Meinung - du hast hier einen Brocken aus der Wikipedia ausgeworfen (um nicht schon wieder hingerotzt) zu sagen. Ich habe dir - aus voller Überzeugung[1] - gesagt, dass die Informationen zu diesem Thema in der Wikipedia Mist sind.
Es macht keinen Spaß mehr, irgendwas hier zu posten.
Du bist aber sehr zart besaitet - in anbetracht solch empfindlicher Reaktionen muss man sich sehr oft zurückhalten überhaupt irgendwas zu schreiben, um nicht jemandem auf den Schlips zu treten.
[1] ja und auch Bullshit-Bingo war völlig ernst gemeint, denn genau das ist der Artikel Barrierefreies Internet.
Eine Ansammlung von Buzzwords ohne nennenswerten, sinnvollen Informationsgehalt.
Beispiel gefällig?
"Problematisch ist jedoch, dass das title-Attribut nicht mit der Tastatur angesteuert werden kann. Aus diesem Grund empfiehlt sich das Auflösen einer Abkürzung in Parenthesen nach der erstmaligen Nennung der Abkürzung:"
Warum zum Teufel schreiben die da "Parenthesen" und nicht Klammern. Warum soll man den Text verwursten wo es doch Generierten inhalt mit CSS gibt?
*[title]:after {
content: attr(title);
}
Die Qualität in diesen Artikeln der Wikipedia ist - und das ist keine Meinung sondern ein Faktum - absolut unter aller Sau. Darüber muss man nicht diskutieren.
Es ist nur schade, dass du das nicht weißt und wenn man dich darauf hinweist, bist du sofort eingeschnappt.
*[title]:after {
content: attr(title);
}
[Die Wikipedia ist jetzt ein bisschen weniger dumm](http://de.wikipedia.org/w/index.php?title=Barrierefreies_Internet&action=historysubmit&diff=84002293&oldid=83567961).
*[title]:after {
content: attr(title);
}
>
>
> [Die Wikipedia ist jetzt ein bisschen weniger dumm](http://de.wikipedia.org/w/index.php?title=Barrierefreies_Internet&action=historysubmit&diff=84002293&oldid=83567961).
Jetzt musst du das noch koordinieren.
Das ist nämlich WIKI-Tutorialwürdig.
Beispiel mit gleich drei Kandidaten-Attributen:
<a hreflang="de" href="http://example.org" title="externer Link">Label</a>
Ein geschicktes Management für :after:after:after {} ist gefragt, damit nicht die Übersicht verloren geht.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Beispiel mit gleich drei Kandidaten-Attributen: <a hreflang="de" href="http://example.org" title="externer Link">Label</a>
Ein geschicktes Management für :after:after:after {} ist gefragt, damit nicht die Übersicht verloren geht.
Ich geh mal davon aus, dass du weißt, dass :after:after nicht erlaubt ist.
{content: "(" attr(title) " " attr(lang) ")";} sollte es aber tun.
PS: neuer Test im IE6 + IE7 folgt in ca. 30 min
Matthias
@@Matthias Apsel:
nuqneH
Ich geh mal davon aus, dass du weißt, dass :after:after nicht erlaubt ist.
?? Nicht. Wer sollte das verbieten?
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Ich geh mal davon aus, dass du weißt, dass :after:after nicht erlaubt ist.
Ich konnte keinen meiner Browser dazu bringen mit z.B. p::after::after etwas anzufangen. Na dann, klär mich mal auf.
Matthias
@@Matthias Apsel:
nuqneH
Ich geh mal davon aus, dass du weißt, dass :after:after nicht erlaubt ist.
Ich konnte keinen meiner Browser dazu bringen mit z.B. p::after::after etwas anzufangen.
Sollte das eine Begründung für „nicht erlaubt“ werden?
Na dann, klär mich mal auf.
nicht implementiert != nicht erlaubt
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
nicht implementiert != nicht erlaubt
Danke.
Matthias
@@suit:
nuqneH
„Verwendet man das acronym-Element, so buchstabiert ein Screenreader nicht die einzelnen Buchstaben, sondern spricht das Wort nach Möglichkeit als Ganzes aus. Im Gegensatz dazu steht das abbr-Element (für abbreviation, zu deutsch: Abkürzung). Hier liest der Screenreader die jeweilige Abkürzung Buchstabe für Buchstabe vor.“
Tun Screenreader das wirklich?
Basieren nicht viele auf IEs, die 'abbr' gar nicht kennen?
Was ist, wenn sich Seitenautoren über den Unterschied zwischen 'abbr' und 'acronym' nicht im Klaren sind? Was ist mit Mischformen? Was ist, wenn HTML5 'acronym' (endlich!) abschafft?
S.a. meinen Kommentar im Webkrauts-Adventskalender.
Qapla'
„Verwendet man das acronym-Element, so buchstabiert ein Screenreader nicht die einzelnen Buchstaben, sondern spricht das Wort nach Möglichkeit als Ganzes aus. Im Gegensatz dazu steht das abbr-Element (für abbreviation, zu deutsch: Abkürzung). Hier liest der Screenreader die jeweilige Abkürzung Buchstabe für Buchstabe vor.“
Tun Screenreader das wirklich?
JAWS tat es - zumindest als ich ihn vor etwa einem halben Jahr mal wieder ausprobiert habe - nicht.
Basieren nicht viele auf IEs, die 'abbr' gar nicht kennen?
Ich denke nicht, die hängen sich irgendwo in die Windows API rein. Die sind nicht darauf beschränkt, dir den Browserinhalt vorzulesen, die können auch Problemlos das Windows-Startmenü lesen.
Ich weiß nicht, was hier letzte Zeit für eine besch.. Diskussionskultur herrscht?! Jedermann, der hier mal eine andere Meinung vertritt, als die der gekrönten Häupter einer kleinen, aber sehr dominaten Gruppe in diesem Forum, bekommt gleich von mehreren Seiten verbal was auf die Fres...
Warum sagst du das mir?
Du bist ja erstmal auch gar nicht auf _mein_ Anliegen eingegangen, sondern hast mit einer fremden faulen Keule um dich geschlagen.
Deine meinung könntest du dir bilden, nachdem das Menu, das hier zum usability-Test zwecks vervollkommnung eines Vorbildes gepostet wird, von dir getestet und beurteilt wird.
Diese Meinung nehme ich dann gerne zur Kenntnis.
mfg Beat
Falls es dir weiterhilft: Ich hab auch mal ein CSS-Dropdown-Menü gebaut, hauptsächlich zum Testen von CSS3-Transitions, wobei das Menü allerdings auch abwärtskompatibel ist.
Vielleicht kannst du dir da ja das ein oder andere abschauen...
Wichtiger Unterschied zu deinem Ansatz: Es funktioniert mit beliebig vielen Subleveln, sowohl CSS als auch JavaScript.
Der JavaScript-Teil (der die Tastaturnavigation aktiviert) basiert allerdeings auf jQuery... ich bin mir da nicht so sicher, wieviel Aufwand es wäre das ganze ohne jQuery-Abhängigkeit zu programmieren...
https://dl.dropbox.com/u/1496903/css3menu_1.html
MfG
ScaraX
Om nah hoo pez nyeetz, ScaraX!
Falls es dir weiterhilft: Ich hab auch mal ein CSS-Dropdown-Menü gebaut, hauptsächlich zum Testen von CSS3-Transitions, wobei das Menü allerdings auch abwärtskompatibel ist.
Funktioniert allerdings im IE6 des IE-Testers nicht und ist im IE7 eher abschreckend anzusehen - Da hab' ich eine andere Vorstellung von Abwärtskompatibilät.
Wichtiger Unterschied zu deinem Ansatz: Es funktioniert mit beliebig vielen Subleveln, sowohl CSS als auch JavaScript.
Wieviele Sublevels möchtest du auf Internetseite denn haben, wenn du dich zurechtfinden willst?
Matthias
Funktioniert allerdings im IE6 des IE-Testers nicht und ist im IE7 eher abschreckend anzusehen - Da hab' ich eine andere Vorstellung von Abwärtskompatibilät.
Mit abwärtskompatibel meinte ich hauptsächlich, dass es auch ohne CSS3 (also mit CSS2.1) funktioniert. Der IE6 kennt kein li:hover, daher hab ich den nicht beachtet. Die Fehler im IE7 könnte man relativ einfach beheben... die Funktionalität klappt da aber ;)
Wieviele Sublevels möchtest du auf Internetseite denn haben, wenn du dich zurechtfinden willst?
Es geht hier hauptsächlich darum, dass man nicht für jedes Sublevel eigene Klassen (.level1, .level2 usw.) festlegen muss.
MfG
ScaraX
Funktioniert allerdings im IE6 des IE-Testers nicht und ist im IE7 eher abschreckend anzusehen - Da hab' ich eine andere Vorstellung von Abwärtskompatibilät.
Mit abwärtskompatibel meinte ich hauptsächlich, dass es auch ohne CSS3 (also mit CSS2.1) funktioniert.
Das ist ein integraler Bestandteil der CSS-Spezifikationen - das muss man als Autor nicht als sonderlich große Leistung hervorheben.
Es geht hier hauptsächlich darum, dass man nicht für jedes Sublevel eigene Klassen (.level1, .level2 usw.) festlegen muss.
Das würde sich beim Ansatz von Beat ebenfalls machen lassen - warum das nicht gemacht wurde ist mir ein Rätsel - von ihm bin ich besseren Code gewöhnt.
Es geht hier hauptsächlich darum, dass man nicht für jedes Sublevel eigene Klassen (.level1, .level2 usw.) festlegen muss.
Die Klassen für jeden Level sind eigentlich nicht notwendig für die Logik.
Sie erlauben aber potentiell den Verzicht auf den > Kombinator und bieten einebessere Möglichkeit, Styles zu veriieren.
mfg Beat
Wieviele Sublevels möchtest du auf Internetseite denn haben, wenn du dich zurechtfinden willst?
Du hast doch keine Ahnung, was sich Kunden wunschen :D
Wieviele Sublevels möchtest du auf Internetseite denn haben, wenn du dich zurechtfinden willst?
Du hast doch keine Ahnung, was sich Kunden wunschen :D
Unbeschränkten Platz und unbeschränkt lange Arme.
mfg Beat
Om nah hoo pez nyeetz, suit!
Wieviele Sublevels möchtest du auf Internetseite denn haben, wenn du dich zurechtfinden willst?
Du hast doch keine Ahnung, was sich Kunden wunschen :D
stimmt, erst recht ein Grund im Wiki auf die Sinnhaftigkeit hinzuweisen. Kannst du mir eine Seite nennen, bei der es Submenüs bis zur 4, ... Ebene gibt?
Matthias
Ist auch im FX nicht mit der tab-Taste bedienbar.
Mein primäres Ziel ist aber eine zugängliche Drop-Down oder Drop-Left Navigation.
Ich werde mir allenfalls noch überlegen, einen verzögerten hover-Effekt für den obersten Level zu implementieren.
mfg Beat
Ist auch im FX nicht mit der tab-Taste bedienbar.
Mein primäres Ziel ist aber eine zugängliche Drop-Down oder Drop-Left Navigation.
Meinst du mit FX den Firefox? Da funktioniert bei mir die Tab-Navigation problemlos bei aktivierten JavaScript
Ist auch im FX nicht mit der tab-Taste bedienbar.
Mein primäres Ziel ist aber eine zugängliche Drop-Down oder Drop-Left Navigation.Meinst du mit FX den Firefox? Da funktioniert bei mir die Tab-Navigation problemlos bei aktivierten JavaScript
OK, ich musste meinen AdBlocker abschalten. Der blockiert nämlich auch third-party-scripte.
mfg Beat
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>
IE6 keine Funktion
IE7 Items, die in der Hierarchie nicht die letzten sind oder keine Kinder haben, bleiben stehen. Pfeile könnte man über background-grafiken realisieren.
Matthias
IE6 keine Funktion
IE7 Items, die in der Hierarchie nicht die letzten sind oder keine Kinder haben, bleiben stehen. Pfeile könnte man über background-grafiken realisieren.
Wenn ich dein MSIE6 Shot anschaue, kommt mir der Verdacht, das Script wird nicht ausgeführt.
Im MSIE läuft, emuliert durch den MSIE8 bei mir alles OK.
Soweit bin ich ratlos, was ich da fixen soll.
Ich denke, ich stelle das Beispiel ins Wiki und lasse Tester dort mit dem Code experimentieren.
Danke auf jeden Fall für deine Mühe.
mfg Beat
Kann den Bug nachvollziehen.
verursacht bei onmouseout auf dem letzten Menuitem.
nur MSIE7 aber nicht MSIE8 Modus.
mfg Beat
das DUrchsteppen mit der TAB-Taste sollte doch auch mit tab-index realisierbar sein? Laut WIKI beherrschen das alle relevanten Browser ;-)
Wäre es für Benutzer intuitiv, wenn die Pfeile auch die Pfeile auf der Tastatur widerspiegeln?
Pfeile als Hintergrundbild hatte ich schon genannt.
Matthias
das DUrchsteppen mit der TAB-Taste sollte doch auch mit tab-index realisierbar sein? Laut WIKI beherrschen das alle relevanten Browser ;-)
Tabindex kommt ja zur Anwendung, nämlich um a ohne href fokussieren zu können.
Ich kann Links fokusieren
Aber wenn ich folgendes Markup habe
...
<li><a></a>
<ul class="levelx">...</ul>
</li>
Dann brauche ich im CSS den Adjacent Sibling Combinor, welchen MSIE6 nicht versteht.
Deshalb muss ich mit JS im li Element eine .hover Klasse setzen.
fokusiert aber (mit onfocus) werden die a-Elemente.
mfg Beat
Siehe Live Beispiel im WIKI
http://wiki.selfhtml.org/wiki/Benutzer:Beatovich/LaoutTipps#Live-Beispiel
Bitte postet Fixes für MSIE 6 auf die Diskussionsseite.
mfg Beat