Horizontales CSS-Menü « websache:blog

Aktuelle Position:

Home » Horizontales CSS-Menü

Horizontales CSS-Menü

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:

<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>

Erstes Beispiel:

So sieht das horizontales CSS Menü EINS aus

Der Code:

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;
}

Zweites Beispiel

So sieht das horizontales CSS Menü ZWEI aus

Der Code:

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;
}