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.

1. Menu ohne CSS ansehen

Alle Beispiele validieren XHTML 1.0, sind CSS2 konform und tableless.
Getestet auf: MAC: Safari, Opera, Firefox, und PC: IE 6/7, Firefox

2. HTML erstellen und validieren

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>

..... usw.

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.

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

#navi 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.

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

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

#navi a:hover {
  color:#564b47;
  background-color: #e1ddd9; 
  }
#navi li li a {
  font-size: 1em;
  color:#564b47;
  background-color: #f5f5f5; 
  border:1px solid #e1ddd9;
  }

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; }