Keyboard accessible CSS Submenu

helloworld · #1 (**permalink**) 16.06.2012, 21:43

Ich habe eine horizontale CSS Navigation und möchte, dass die Links aus den Submenüs auch per Tabtaste erreichbar sind, also die Untermenüs auch bei :focus ausgeklappt werden (das funktioniert auch) und dann das Auswählen der jeweiligen Untereinträge möglich ist (funktioniert nicht per :focus).
Habe zwar eine Lösung gefunden, kennt ihr vielleicht eine bessere, die mit weniger JS auskommt? (vielleicht durch neue Möglichkeiten aus HTML5 & CSS3)
Suckerfish Dropdowns - Two Level Bones - Keyboard Accessible

heiko_rs · #2 (**permalink**) 17.06.2012, 02:36

Es geht sogar komplett ohne JS - mal schnell zusammengepfuscht, um die Idee zu demonstrieren (die Idee zum Float-Drop-Prinzip sah ich vor Jahren auf CSSplay). Beim Tabben kommt die Subnavi an die gewünschte Stelle und bleibt auch stehen. Der Rest, d.h. das Unsichtbarmachen im Normalzustand, ist dann ein Selbstgänger, z.B. mit Überbreiten und overflow: hidden; etc.

HTML-Code:

<!DOCTYPE html>
<html lang="de">

<meta charset="utf-8">
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	list-style: none;
	}

body {
	font: 100% sans-serif;
	padding: 20px;
	}

ul#nav {
	float: left;
	width: 100%;
	}

ul#nav li {
	float: left;
	}

ul#nav > li {
	width: 300px;
	}

ul#nav a {
	display: block;
	width: 150px;
	background: #c00;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding: 5px 0;
	}

ul#nav > li > a {
	float: left;
	border-top: 10em solid #fff;
	}

ul#nav ul {
	float: left;
	}

ul#nav ul li {
	clear: left;
	}

ul#nav ul a {
	border-top: 1px solid #000;
	}

ul#nav a:focus {
	margin-right: 1px;
	background: red;
	}

</style>

<ul id="nav">
<li><a href="#">Fotos</a>
	<ul>
	<li><a href="#">Fotos 1</a></li>
	<li><a href="#">Fotos 2</a></li>
	</ul>
</li>
</ul>

helloworld · #3 (**permalink**) 18.06.2012, 20:57

Habe ich mir angeschaut, wenn ich es richtig sehe, dann funktioniert diese Methode aber nur bei festen Breitenangaben, da ich sonst das "Nachuntenrutschen" nicht provozieren kann oder?
Denn in meinem Menü möchte ich für die einzelnen Punkte keine Breitenangaben machen.

helloworld · #4 (**permalink**) 12.07.2012, 22:03

Kennt da jemand noch einen Trick?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 CSS Files -> 1 CSS File	Habi	CSS	7	17.02.2010 15:25
Verschachteln und Erweitern von CSS?	DerJo	CSS	4	25.01.2010 18:07
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 02:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 08:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 11:39