Wie man Menüs mittels dem ul-Tag und CSS auch ohne Grafiken schön gestalten kann, haben wir bereits veranschaulicht.Siehe Barrierefreie CSS Menüs
Hier wollen wir einige Beispiele für horizontale CSS Menüs präsentieren.
Alle Menüs bauen auf folgendes HTML-Gerüst auf:
1 2 3 4 5 6 | <ul class="menu1"> <li><a href="#">Home</a></li> <li><a href="#">Inhalt</a></li> <li><a href="#">Info</a></li> <li><a href="#">Kontakt</a></li> </ul> |
So sieht das horizontales CSS Menü EINS aus
Der Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | ul.menu1 { text-align: center; border-bottom: solid 1pc #666666; width: 80%; margin-right: auto; margin-left: auto; margin-bottom: 25px; } .menu1 li { display: inline; padding-bottom: 4px; } .menu1 li a { font-size: 11px; color: #000000; text-decoration: none; border-top-width: 1px; border-right: solid 1px #FFFFFF; border-left: solid 1px #FFFFFF; padding-top: 2px; padding-right: 2px; padding-left: 2px; } .menu1 li a:hover { color: #FF6600; border: solid 1px #666666; border-bottom:none; } #v2 a:hover { font-size: 16px; } |
So sieht das horizontales CSS Menü ZWEI aus
Der Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | ul.menu1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #666666; width: 80%; margin-right: auto; margin-left: auto; margin-bottom: 25px; clear: both; margin-top: 25px; } .menu1 li { display: inline; } .menu1 li a { display: block; float: left; font-size: 11px; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; color: #FFFFFF; background-color: #666666; text-decoration: none; border: solid 1px #666666; border-left: solid 1px #FFFFFF; } .menu1 li a:hover { color: #666666; background-color: #FFFFFF; border-color: #666666; } #v2 a:hover { padding-right: 23px; } |
barrierefrei · CSS · Webdesign