nicht angemeldet
CSS Menü ausklappen auch mit Tastatur (Fokus) ?
Hallo zusammen,
ich versuche mich gerade an einem CSS Menü.
Soweit klappt es schon ganz gut.
Was ich jetzt noch gerne machen würde, wäre das sich das Menü ausklappt wenn man mit der Tastatur bzw. mit der Tab Taste ins das Menü springt.
Ich dachte mit einer zusätzlichen Fokus Angabe für das LI Element würde das gehen.
#nav li:focus > ul {
display:block;
}
Dem ist leider nicht so.
Ich poste mal der einfach heit halber mal die gesamte HTML Datei mit CSS.
Vielleicht hat jemand eine Idee dazu?
Kann man das überhaupt mit reinem CSS erreichen?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>
#nav,
#nav ul { list-style: none; margin: 0; padding: 0; }
#nav {
background: #16314b;
font-family: Arial, Helvetica, sans-serif;
font-size: 100.01%;
height:1.9em;
}
#nav li.firstlevel > a{
padding-top:0.25em; /* Needed that characters of first line is in middle horizontal line */
}
#nav li {
background: #16314b;
float: left;
height: 1.9em; /* 32px / 14px */
margin: 0;
padding: 0;
position: relative;
}
#nav a {
background: url(../imgage/a.gif) left top no-repeat;
color: #c7d0d9;
display: block;
padding: 1px 7px 3px;
text-decoration: none;
}
#nav input {
background: url(../imgage/a.gif) left top no-repeat;
color: #c7d0d9;
font-size: 100.01%;
display: block;
text-align:left;
text-decoration: none;
border: none;
margin-left:-10px;
*margin-left:-2px;
}
/* Set up the pointers for the sub level indication */
#nav li.fly { background: #20456a url(../image/arrow_right_white.png) no-repeat right center; }
#nav li.drop {background: #16314b url(../image/arrow_down_white.png) no-repeat right center; }
#nav li.fly ul li a{
width:320px;
background: #20456a;
}/*damit beim links aufklappenden Menü Jobsettins die Breite grösser wird */
#nav a:hover,
#nav a:focus { color: #fff }
#nav ul {
background: #20456a;
position: absolute;
}
#nav ul li {
background: none;
float: none;
height: auto;
width: 180px; /* 180 */
}
#nav ul a {
background: none;
width: 165px; /* 163 */
}
#nav ul a:hover, #nav ul a:focus {
background: #16314b;
}
#nav ul .hover>a { background: #16314b; }
#nav ul ul { left: 180px; top: 0.1em; /* 6px / 12px */ }
#nav li ul {display:none;}
#nav li:hover > ul {
display:block;
}
* html #nav li ul {visibility:hidden; display:block; }
#nav li a:hover ul ul{
visibility:hidden;
}
#nav li a:hover ul {
visibility:visible;
}
</style>
</head>
<body>
<ul id="nav">
<li class="firstlevel drop"><a href="#home" style="width:4em" accesskey="8">File</a>
<ul>
<li><a href="job.php?homepage=yes">Home Page</a></li>
<li><a href="job.php?Job=yes">Job</a></li>
<li><a href="#config" onclick="window.open('config.php','ConfigWin','width=800,height=530,scrollbars=yes,resizable=yes')">Config</a></li>
<li><a href="../include/logout.php">Exit</a></li>
</ul>
</li>
<li class="firstlevel drop"><a href="#job" style="width:8.2352941176471em">Settings</a>
<ul>
<li><a href="#savejob" style="width:10.2em"><input name="cmd_savesettingsmenu" type="submit" value="Save settings" onclick="return checkfiles();" /></a></li>
<li class="fly"><a href="#jobsetting" style="width:10.2em">Call settings</a>
<ul>
<li><a href="job.php" style="width:25em">Menu fly 1</a></li>
<li><a href="job.php" style="width:25em">Menu fly 2</a></li>
</ul>
</li>
<li><a href="#delete" style="width:10.2em" onclick="window.open('delete.php','Absolut','width=600,height=450,scrollbars=yes,resizable=yes')">Delete settings</a></li>
</ul>
</li>
</body>
</html>
vielen Dank und viele Grüße
hawk
-
Hallo, hawk
Du fragst :focus beim falschen Element ab. Formularelemente und Links bekommen einen Focus, alle anderen, etwa li-Tags, gehen beim CSS-Selektor leer aus.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Hallo LX,
danke für deine Hilfe.Du fragst :focus beim falschen Element ab. Formularelemente und Links bekommen einen Focus, alle anderen, etwa li-Tags, gehen beim CSS-Selektor leer aus.
hmm, ich dachte man kann :focus für alle Elemente nehmen?
Du meinst dann so?#nav li a:focus {
display:block;
}vielen Dank und viele Grüße
hawk-
Das sollte besser funktionieren. Genau weißt Du es erst nach dem Ausprobieren.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Hallo
Das sollte besser funktionieren. Genau weißt Du es erst nach dem Ausprobieren.
Leider klappt es damit auch nicht.
#nav li a:focus {
display:block;
}Nur nochmals zu meinem Verständnis.
Mit;#nav li:hover > ul {
display:block;
}erreiche ich das das Untermenü ausklappt.
Warum geht dann nicht;
#nav li:focus > ul {
display:block;
}Wenn man mit der Tabtaste in das erste Menü springt?
Ist dann der Focus nicht im LI sondern im <a> Tag?
Aber dann sollte ja die zweite Variante mit "#nav li a:focus"
funktionierenvielen Dank und viele Grüße
hawk-
Nein, weil das Parent-Element display:none; hat.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Hallo
Nein, weil das Parent-Element display:none; hat.
Hmm, bedeutet das das es so nicht geht?
Muss man dann hier mit visibility:hidden;
bzw. visibility:visible; arbeiten anstatt display:none?vielen Dank und viele Grüße
hawk-
Nein, so funktioniert das auch nicht.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Hallo LX,
Nein, so funktioniert das auch nicht.
Wäre echt toll, wenn du ein wenig mehr Infos geben könntest, wie man es dann machen muss. Ich habe echt keine Idee mehr.
vielen Dank und viele Grüße
hawk
-
-
-
-
-
-
-
Hallo, hawk
Du fragst :focus beim falschen Element ab. Formularelemente und Links bekommen einen Focus, alle anderen, etwa li-Tags, gehen beim CSS-Selektor leer aus.
Es sei denn, ihnen wurde durch tabindex die Fokusierbarkeit gegeben.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Stimmt, da war noch so was - aber funktioniert das auch in allen Browsern?
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
-
-
-
Ich mach's kurz
Eine zuverlässige Tastaturführung gibt es nur mittels Javascript, das heisst also, gar nicht.
Im übrigen ist display schlecht. Nutze positionierung. Screenreader werden es dir danken.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische