Horizontaal menu met CSS UL en LI
18-10-2010
In deze tutorial gaan we zien hoe je simpel en snel een mooi horizontaal CSS menu kan maken.We maken gebruik van Unordered List (ul) en List Item (li) elementen.
Het menu is snel en simpel aan te passen aan je eigen eisen.
Resultaat:
HTML lijst (ul li) met links
We beginnen met het maken van eenn lijst met links in HTML.CSS
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">CMS</a></li>
- <li><a href="#">Portfolio</a></li>
- <li><a href="#">Contact</a></li>
- <li><a href="#">Blog</a></li>
- </ul>
Dat ziet er in een browser als volgt uit.
UL stylen met css
CSS
- ul{
- list-style-type: none;
- background-image: url(tutorial/menu_bg.png);
- height: 80px;
- width: 460px;
- margin: auto;
- }
background-image: url(navi_bg.png); : Een achtergrond plaatje (van 1 bij 80 px) welke automatisch herhaald wordt.
height: 80px; : Hoogte
width: 663px; : Breedte
margin: auto; : Margins op 'auto' helpt erbij om de UL automatisch te centreren.
LI stylen met css
CSS
- li {
- float: left;
- }
De links stylen met css
CSS
- ul a {
- background-image: url(tutorial/menu_divider.png);
- background-repeat: no-repeat;
- background-position: right;
- padding-right: 20px;
- padding-left: 20px;
- display: block;
- line-height: 80px;
- text-decoration: none;
- font-size: 16px;
- color: #637f06;
- }
De 'divider' : background-image, zet het plaatje, background-repeat, zorgt voor geen herhaling en position zet het plaatje rechts.
Padding zorgt voor ruimte links en rechts van de tekst.
display: block; maakt de hele block klikbaar. (En niet alleen het linkje)
line-height: 80px; Hierdoor komt de tekst ook verticaal in het midden te staan.
De laatste aanpassingen
Als laatste geven we de 'hover' nog een ander kleurtje zodat het beter zichtbaar is wanneer je over een link heen gaat.
CSS
- ul a:hover {
- color: #FFF;
- }
Resultaat
Dit menu is snel en makkelijk te maken en aan te passen.In HTML zijn er 'vele wegen die naar rome leiden'. Dat geldt ook voor dit menu. Deze oplossing is één van de mogelijkheden.
De plaatjes die gebruikt worden in dit voorbeeld kunnen zelf heel eenvoudig na gemaakt worden, maar hoeven niet te worden gebruikt. Ook zonder deze kan nog steeds een strak ogend menu worden gemaakt.
Luc van gerrevink
De blokken met tekst hebben geen gelijke grote omdat de tekst van verschillende lengte is. Hoe krijg ik op een nette manier "blokken" van gelijke breedte?
mark siekmans
Beste,
Hier heb ik zelf ook een stukje van gebruikt in mijn ontwerp. Ik ben snel lerende beginnen in CSS met HTML en heb de volgende vraag. Ik gebruik nu de UL en LI aanduidingen in het CSS stylesheet, maar als ik deze nu ergens anders nog een keer nodig heb en andere waarde wil toekennen, hoe doe ik dit dan? moet dat in een andere div id gedaan worden, of class?
