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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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:

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
* {
 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.

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

12
<li><a href="#" id="current">home</a></li>

.

De css code is als volgt:

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

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

Als je dit een interessant
artikel vond…

wil je vast ook mijn NIEUWSBRIEF!
Iedere week weer een nieuw ARTIKEL!

Krijg je ook meteen dit ebook met 101 tips voor
creatieve ondernemers & bloggers!

ebook 101 tips voor creatieve ondernemers en bloggers

14 Reacties

Voeg toe →

  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. @Pinjo
    Je hebt gelijk, de ‘width’ was niet nodig en komt vanuit een ander probeersel. ‘Width’ werkt namelijk niet bij display:inline;

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

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

  5. šŸ˜®
    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?

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

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

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

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

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

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

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

  13. 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!

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

Geef een reactie

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