Vertikale Menüleisten (Senkrechte
Seitennavigation)
Die hier genannten Menüvorlagen sind alle ohne das
Einsetzen von Bildern gestaltet
Für alle unten genannte CSS-Codes gilt immer
folgender Html-Code in den Body-Bereich einer Html-Datei :
<ul id="---Hier kommt der erste genannte Begriff, der
in den Textfelder ist, hin: er fängt mit #navi... an, blos
hier ohne das '#'- Zeichen einfügen---">
<li><a href="#" title="Link1">Link
1</a></li>
<li><a href="#" title="Link2">Link
2</a></li>
<li><a href="#" title="Link3">Link
3</a></li>
</ul>
| Beispiel
zeigen (Hier Klicken) |
|
-----Beispiel-----
<html>
<head>
#navi_v1 {
font-family:"Trebuchet MS",Helvetica,Arial,Verdana,sans-serif;
margin: 0px;
padding: 3px;
border-bottom: 1px solid #000000;
}
#navi_v1 li {
display: inline;
}
#navi_v1 li a {
color: #000000;
background-color: #CCCCCC;
padding: 3px 1em;
margin-left: 3px;
border: 1px solid #000000;
border-bottom: 1px solid #000000;
text-decoration: none;
}
#navi_v1 li a#aktuell {
background-color: #fc0;
padding-bottom: 3px;
border-bottom: 1px solid #fc0;
}
#navi_v1 li a:hover {
text-decoration: underline;
}
</head>
<body>
<ul
id="navi_v1">
<li><a href="#" title="Link1">Link
1</a></li>
<li><a href="#" title="Link2">Link
2</a></li>
<li><a href="#" title="Link3">Link
3</a></li>
</ul>
</body>
</html>
Beispiel
schließen (Hier Klicken)
|
|
Vertikale Menüleiste Nr. 1
Vertikale Menüleiste Nr. 2
Vertikale Menüleiste Nr. 2