HTML-site.nl

Superhandige Tips voor Jouw Eigen Website

4 menu’s in CSS

door ·

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.

Meer van dit soort handige tips met HTML en CSS? Meld je aan voor de HTML-site Nieuwsbrief!
[mc4wp_form id=”940131″]

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 in CSS - 1

Menu in CSS – 1

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

Horizontaal menu in CSS - 2

Horizontaal menu in CSS – 2

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

Horizontaal menu in CSS met tabbladen

Horizontaal menu in CSS met 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

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

Verticaal menu in CSS met afbeeldingen

Verticaal menu in CSS met afbeeldingen

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 2

ster 1

* {
 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(ster1.jpg);
 list-style-position: inside;
}
 
.menu ul li:hover {
 list-style-image: url(ster2.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?

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

Tags:

14 reacties

  1. Pinjo schreef:
    26 oktober 2008 om 18:06

    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.

    Beantwoorden
  2. admin schreef:
    26 oktober 2008 om 18:29

    @Pinjo
    Je hebt gelijk, de ‘width’ was niet nodig en komt vanuit een ander probeersel. ‘Width’ werkt namelijk niet bij display:inline;

    Beantwoorden
  3. Fred Sipkema schreef:
    10 december 2008 om 12:27

    Duidelijk verhaal, maar hoe krijg je het voor elkaar dat wijzigingen in de navigation bar in een keer voor b.v. 7 pagina’s en 13 tabbladen gaat werken.

    Beantwoorden
  4. J schreef:
    15 november 2009 om 20:32

    Waar moet je die CSS code invoegen bij de orginele HTML code? ;o
    handig!

    Beantwoorden
  5. J schreef:
    15 november 2009 om 22:21

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

    Beantwoorden
  6. J schreef:
    15 november 2009 om 22:22

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

    Beantwoorden
  7. fred schreef:
    4 februari 2010 om 21:07

    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.

    Beantwoorden
  8. Gerard schreef:
    21 februari 2010 om 15:19

    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.

    Beantwoorden
  9. hallo schreef:
    26 februari 2010 om 20:31

    ik snap het niet:$ kan iemand mij uit leggen hoe ik het horizontale menu moet maken want ik snap de css codes niet:%

    Beantwoorden
  10. Mark schreef:
    24 juni 2010 om 12:01

    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

    Beantwoorden
  11. Ilja schreef:
    19 oktober 2010 om 09:19

    Ik heb het star menu uitgeprobeerd, Maar de tekst komt eronder en niet ernaast. Hoe kan ik dat oplossen?

    Beantwoorden
  12. Andy schreef:
    9 september 2011 om 10:25

    Hoe begin je aan zoiets,
    wat plaats je in css en vooral hoe maak je dit aan?

    Beantwoorden
  13. Andy schreef:
    9 september 2011 om 10:31

    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!

    Beantwoorden
  14. Robert schreef:
    19 oktober 2011 om 10:38

    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">
 
<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: ***

    Beantwoorden

Geef een reactie

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