4 menu's in CSS

Een menu is een onmisbaar gedeelte in een website. Een goed menu zal een gebruiker dan ook altijd weer op de juiste plek terugbrengen. Tegenwoordig is het namelijk zo dat een bezoeker op elke willekeurige pagina kan binnenkomen. Hij zal dus vanaf iedere pagina moeten kunnen navigeren.
We hebben een basismenu gemaakt en daar 4 keer een andere CSS code aan gekoppeld. Hierdoor krijg je 4 verschillende menu’s.

De html code

De html code geven we een keer. Deze kun je natuurlijk zo aanpassen dat het helemaal naar eigen wens is. Een menu hebben we opgebouwd met behulp van een lijst. Dat is namelijk semantisch de correcte manier. Het menu hebben we geplaatst in een ‘div’. Hiermee kun je in de css code namelijk verschillende aanpassingen doen. Het stijlblad roepen we van buiten af aan. Je moet wel de juiste naam meegeven en het stijlblad in dezelfde directory plaatsen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>HTML menu</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
			<div class="menu">
		 			 <ul>
		 		 	 		 <li><a href="#">home</a></li>
				 			 <li><a href="#">artikelen</a></li>
				 			 <li><a href="#">forum</a></li>
				 			 <li><a href="#">links</a></li>
				 			 <li><a href="#">contact</a></li>
		 			 </ul>
			</div>
</body>
</html>

1. Een eenvoudig horizontaal menu

menu 1, horizontaal, eenvoudig
Het eerste menu is een heel eenvoudig menu. We maken deze horizontaal, dit doe je door display: inline; aan de css code voor de lijsten toe te voegen. Overigens stellen we bij alle voorbeelden de padding en margin op nul, door bovenaan * {margin: 0; padding: 0;} te plaatsen.
De eerste code:

* {
 padding: 0;
 margin: 0;
 font-family: Trebuchet MS;
}

.menu {
 margin: 5px;
 padding: 5px;
 border: 1px solid black;
 text-align: center;
}

.menu ul li {
 display: inline;
 padding: 0 5px;
}

.menu ul li a, a:link, a:visited, a:active {
 color: #666;
 text-decoration: none;
}

.menu ul li a:hover {
 color: #333;
 text-decoration: underline;
}

2. Horizontaal menu met onderstreping

menu 2, horizontaal, onderstreept
Het tweede menu is weer horizontaal, maar nu met een donkere achtergrond en witte letters. Bij het overgaan met een muis, krijgt het betreffende onderdeel een streep.

* {
 padding: 0;
 margin: 0;
 font-family: Trebuchet MS;
}

.menu {
 margin: 5px;
 padding: 5px;
 border: 1px solid black;
 background-color: #666;
 text-align: center;
}

.menu ul li {
 display: inline;
 padding: 0 5px;
 width: 40px;
}

.menu ul li a, a:link, a:visited, a:active {
 color: #FFF;
 text-decoration: none;
 font-weight: bold;
}

.menu ul li a:hover {
 color: #FFF;
 border-bottom: 3px solid #FFF;
}

3. Tabbladen menu

menu 3, horizontaal, tabbladen
Zogenaamde tabbladen zijn nog steeds gewild. Met onderstaande stijlcode kun je een menu van tabbladen maken. Let er wel op dat je de tab die de huidige pagina weergeeft in html de code id="current" meegeeft. Regel 12 in de html code wordt dan <li><a href="#" id="current">home</a></li>.
De css code is als volgt:

* {
 padding: 0;
 margin: 0;
 font-family: Trebuchet MS;
}

.menu {
 margin: 5px;
 padding: 5px 5px 0 5px;
 text-align: center;

}

.menu ul {
 border-bottom: 1px solid black;
}

.menu ul li {
 display: inline;
 margin: 0 2px;
 padding: 0 5px;
}

.menu ul li a, a:link, a:visited, a:active {
 color: #333;
 background-color: #EEE;
 text-decoration: none;
 font-weight: bold;
 border: 1px solid black;
 padding: 0 40px;
}

.menu ul li a#current {
 border-bottom: 1px solid #FFC;
 background-color: #ffffcc;
}

4. Verticaal menu met ster

menu 4, verticaal, met plaatje
Voor het volgende menu hebben we een plaatje gebruikt. Eigenlijk twee plaatjes om een mouseover functie te kunnen toepassen. De plaatjes staan hierna, download ze naar je eigen map met plaatjes.
ster
ster

* {
 padding: 0;
 margin: 0;
 font-family: Trebuchet MS;
}

.menu {
 margin: 5px;
 padding: 5px;
 width: 180px;
 border-right: 1px solid black;
}

.menu ul li {
 padding: 0 5px;
 line-height: 20px;
 list-style-image: url(star-1.jpg);
	list-style-position: inside;
}

.menu ul li:hover {
	list-style-image: url(star-2.jpg);
	list-style-position: inside;
}

.menu ul li a, a:link, a:visited, a:active {
 	color: #000;
 	text-decoration: none;
}

Hoe ziet jouw favoriete menu er eigenlijk uit?

14 Reacties

  1. Hey,
    Mooi verhaal, laat goed zien wat je allemaal met css kunt, en hoe flexibel het is. Maar ik had nog 1 vraag. Bij het 2de css-verhaal staat bij .menu ul li:

    “width: 40px; ”

    Ik snap niet waar dit voor dient, en zie het ook niet terug in de menubalk. Foutje? of zie ik iets over het hoofd.

  2. 😮
    Okay, I got it.
    And in HTML-Kit (HTML-editor) if I see the preview of the code. It works, but in my site’s preview not :S
    Does it only works if my site is online?

  3. Oeps engels >.>
    is automatisme.
    Ik heb de code, en in mijn html editor HTML-Kit) laat hij het menu goed zien. Maar bij de preview van mijn site zie ik het niet :O
    moet ik de site echt op het web hebben staan voordat het menu het doet??

  4. ik probeer met menu 3 een navigatiebalk te maken maar heb problemen met {id current}, kan je aangeven hoe dit in de HTML code geplaatst moet worden als ik het doe zoals in het voorbeeld neemt alleen home de achtergrond kleur aan.

  5. Na wat gepuzzel met je voorbeelden heb ik een horizontaal menu gemaakt met de effecten die ik wilde, namelijk allen dezelfde kleur behalve degene waarvan d epagina actief is. Eén ding heb ik daarbij echter nog niet voor elkaar. Het menu, dat bovenaan de pagina(‘s) staat, springt nu in t.o.v. de linkerkantlijn van de pagina. Heb al met cellpadding en margins zitten rommelen, maar krijg het niet voor elkaar. Wat zou jouw oplossing zijn? Moet ( natuurlijk ) ook werken binnen Firefox etc.

  6. Ik heb een probleem met het tabblad menu want ik heb een verticaal menu en wilde er een horizontaal tabbladmenu bij maken. maa als ik de css invoeg dan krijgt het verticaal menu ook allemaal randen en witte vlakken om de tekst. Iemand een suggestie/oplossing?

    PS:veranderen van naam van div/class helpt niet

  7. Oeps te snel,
    * {
    padding: 0;
    margin: 0;
    font-family: Trebuchet MS;
    }

    .menu {
    margin: 5px;
    padding: 5px;
    border: 1px solid black;
    text-align: center;
    }
    Ik bedoel, hoe plaats je dit in de css.

    En het menu maak je aan in custom styl rule,

    .menu ul li a, a:link, a:visited, a:active {
    color: #333;
    background-color: #EEE;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid black;
    padding: 0 40px;
    }
    hoe geef ik dit de naam menu,
    ik loop gewoon een beetje vast,
    wie kan me daarmee helpen?

    Bedankt voor het lezen van dit bericht!

  8. ik snap er niks van moet je die html codes toevoegen aan de eerste of hoe werkt dat ik dee dit:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"&gt;

    <html>
    <head>
    <title>HTML menu</title>
    <link rel="stylesheet" type="text/css" href="menu.css">
    </head>
    <body>
    <div class="menu">
    <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">artikelen</a></li>
    <li><a href="#">forum</a></li>
    <li><a href="#">links</a></li>
    <li><a href="#">contact</a></li>
    </ul>
    </div>
    </body>
    </html> *+ met code 3 =* {
    padding: 0;
    margin: 0;
    font-family: Trebuchet MS;
    }

    .menu {
    margin: 5px;
    padding: 5px 5px 0 5px;
    text-align: center;

    }

    .menu ul {
    border-bottom: 1px solid black;
    }

    .menu ul li {
    display: inline;
    margin: 0 2px;
    padding: 0 5px;
    }

    .menu ul li a, a:link, a:visited, a:active {
    color: #333;
    background-color: #EEE;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid black;
    padding: 0 40px;
    }

    .menu ul li a#current {
    border-bottom: 1px solid #FFC;
    background-color: #ffffcc;
    }

    Mail me dan als je de oplossing weet of sms me: 0623350595

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *