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:
Der obere Abschluß der Säule.
Der Säulenmittelteil.
Der untere Säulenabschluß.
Der eigentliche Menü-Balken.
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>
<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ü*/
/*************************************************/
/*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:
- animierter hover-Effekt.
- ausbau zum 3-Ebenen-Menü.
- Codegenerierung durch php.