Menu mit Submenu - Accessible List

Richtig verschachtelte Listen haben oberste Priorität im Barrierefeien Webdesign. Mit simplen Listen und CSS können radikal verschiedene Listen-Looks kreiert werden. 

Menu in neuem Fenster ansehen.

• Gadgets
  • Bags
  • Shoes
  • Accessoires
• Projects
  • Art
  • CSS
  • Websites
• Kunden
  • Xhtml
  • CSS
  • PHP
  • JavaScript
• Kontakt
  • Adressen
  • Mail me
  • Map

---

1. HTML erstellen

Als Grundlage und Struktur dient für dieses Beispiel eine einfach verschachtelte HTML-Liste.

<ul>
  <li><a href="#">Gadgets</a>
    <ul>
    <li><a href="#">Bags</a></li>
    <li><a href="#">Shoes</a></li>
    <li><a href="#">Accessoires</a></li>
    </ul>
  </li>
  <li><a href="#">Projects</a>
    <ul>
    <li><a href="#">Art</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Websites </a></li>
    </ul>
  </li>
</ul>

2. CSS für die Liste

Die Hauptlistenpunkte li haben float:left, bei den Unterlisten wird das float:left aufgehoben, so dass diese wieder untereinder dargestellt werden.

nav ul {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
nav li {
  width: 120px;
  float: left;
  padding: 0;
  margin: 0 3px 0 0;
  }

nav li li { float: none;}

2. CSS für die Links

Hier ist die Freiheit grenzenlos. Die Links können sehr einfach mit Hintergundbildern, Tranparenz etc. erweitert werden.
Alle Links können vom Kontext #navi li abhängig gemacht werden. display:block macht aus den Inline-Element Link ein Block-Element.

nav a {
  display:block; 
  text-decoration: none;
  font-size: 1.3em;
  color:#fff;
  background-color: #999; 
  border:1px solid #777;
  padding: 3px 10px;
  margin: 0 0 3px;
  }

Für die Sublinks und den a:hover müssen nur noch die Änderungen definiert werden.

nav a:hover {
  color:#564b47;
  background-color: #ddd; 
  }
nav li li a {
  font-size: 1em;
  color:#564b47;
  background-color: #eee; 
  border:1px solid #ccc;
  }

3. Clear

Zuletzt kommt der clear, damit wird das float wieder aufgehoben. Das ist wichtg weil float vererbt wird, float und clear gehören immer zusammen.

.clr{ clear:left; }

Oder mit CSS3 Pseudoselektor

nav:after {
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}