Grafisches css-Menü

Diese css-Navigation besitzt folgende Eigenschaften:


  • Textlinks, dadurch gute Verfolgbarkeit durch Suchmaschienen.
  • beliebig viele Menüpunkte.
  • Vordergrundgrafiken, dadurch beliebig skalierbar.
  • Alle Pseudoklassen lassen sich beliebig formatieren.
  • Ausbau zum "mehr-Ebenen-Menü" möglich.


Die Grafischen Elemente sind:


  • obere Navigationsgrafik Der obere Abschluß der Säule.
  • mittlere Navigationsgrafik Der Säulenmittelteil.
  • untere Navigationsgrafik Der untere Säulenabschluß.
  • Menübalken Der eigentliche Menü-Balken.
  • Laufpunkt Die grafische hover-Animation.

Bis auf die Animation wurden alle Grafiken in Anlehnung an dieses Tutorial mit Gimp erstellt.


Die einzelnen Grafiken werden mit css lückenlos aneinandergesetzt. Durch die Größeneinheit "em" ist die gesamte Navigation beliebig skalierbar, ohne dass das Design zerstört wird. Somit können auch sehbehinderte Menschen die Navigation entsprechend vergrößern und bedienen (Barrierefreiheit).


Der xhtml-Code:

<ul class="nav-graf">
   <li><img class="navsaeule" src="images/nav-oben.gif" alt="obere Navigationsgrafik" /></li>
   <li><img class="navbalken" src="images/nav-menuebalken.gif" alt="Menübalken" /><a href="#">Menüpunkt 1</a></li>
   <li><img class="navsaeule" src="images/nav-mitte.gif" alt="mittlere Navigationsgrafik" /></li>
   <li><img class="navbalken" src="images/nav-menuebalken.gif" alt="Menübalken" /><a href="#">Menüpunkt 2</a></li>
   <li><img class="navsaeule" src="images/nav-mitte.gif" alt="mittlere Navigationsgrafik" /></li>
   <li><img class="navbalken" src="images/nav-menuebalken.gif" alt="Menübalken" /><a href="#">Menüpunkt 3</a></li>
   <li><img class="navsaeule" src="images/nav-mitte.gif" alt="mittlere Navigationsgrafik" /></li>
   <li><img class="navbalken" src="images/nav-menuebalken.gif" alt="Menübalken" /><a href="#">Menüpunkt 4</a></li>
   <li><img class="navsaeule" src="images/nav-unten.gif" alt="untere Navigationsgrafik" /></li>
</ul>

Das css:

/*************************************************/
/*Einstellungen für das grafische css-Menü von Peter Ressel --- http://www.die-seite.eu --- 2009*/
/*************************************************/
ul.nav-graf {
float: left;
width:30em;
margin: 3em 0 0 0;
}
ul.nav-graf li {
margin:-0.4em 0 0 0;
padding:0;
list-style:none;
}
ul.nav-graf li img.navbalken {
width:16em;
}
ul.nav-graf li img.navsaeule {
width:4.2em;
}
ul.nav-graf li a {
text-decoration: none;
font-weight: bold;
color:#BFBFBF;
position:relative;
top:-1.25em;
left:-11em;
border:none;
font-size:110%;
text-decoration: none;
}
ul.nav-graf li a:hover {
color: #FF8000;
font-weight: bold;
font-size:110%;
}
.code-xhtml-nav {
background-color:#717274;
border: 0.1em solid #A8A9AD;
margin:0 1em 0 0;
width:70em;
height:15em;
overflow:auto;
}
/*************************************************/
/*Ende der Einstellungen für das grafische css-Menü*/
/*************************************************/

Ich werde diese Navigation in nächster Zukunft mit weiteren Besonderheiten ausstatten:


zur Webmastering-Hauptseite