Please contact miss MONOROM if you want to translate this Page.

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