Beispiele aus dem Buch (Abschnitt 2.3: Verständlichkeit, Navigation und Orientierung)
Dies ist ein Beispiel aus dem Buch [i;30-80-000-1], das Ende 2004 im dpunkt.Verlag erschienen ist.
Navigation mit unterschiedlich schwer bzw. leicht verständlichen Menüpunkten
Dieses Negativbeispiel stellt eine Navigation dar, die mit deutschsprachigen, fremdsprachigen und abgekürzten Begriffen arbeitet.
HTML
<ul class="navi">
<li><a href="#">Startseite</a></li>
<li><a href="#">Files</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">MMI</a></li>
<li><a href="#">Mein Profil</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
CSS
ul.navi {
margin:0 1em 0 0;
float:left;
width:9em;
list-style-type:none;
padding-left:5px;
}
ul.navi li a {
margin: 0.2em 0 0 0;
padding: 0 0 0 5px;
width:100%;
display:block;
background: #d6d6d6;
text-decoration:none;
color: #000000;
font:bold 90% verdana,arial,sans-serif;
border-left:5px solid #d6d6d6;
}
ul.navi li a:hover,ul.navi li a:focus {
border-left:5px solid #0066B2;
}
Browseransicht
Screenshot
