Menu met semantische html en css (verticaal)

Info 
Door: pinkyboy Moeilijkheidsgraad: 2/3
Views:49.153Reacties: 21(Bekijken)
  Log in om zelf te reageren
 Waardering:5.7/10 (9 stemmen)



De titel van de tut lijkt mij al duidelijk genoeg, we gaan een menu maken met html en css dat valid en semantisch is. Het wordt een simpel menu met een rollover, uitklapmenu's worden besproken in een volgende tut.

Aangezien we het semantisch willen doen, zullen we dus geen tabel gebruiken maar een lijst. Ik kies gewoon voor een ul, de code daarvan is simpel en moet iedereen normaal begrijpen.

#Code
1
2
3
4
5
6
<ul id="menu">
<li><a href="#" class="menu">home</a>
<li><a href="#" class="menu">nieuws</a>
<li><a href="#" class="menu">info</a>
<li><a href="#" class="menu">blaat</a>
</ul>


Nu gaan we met css er voor zorgen dat die bolletjes weg zijn, zodat het er eigenlijk als een menu gaat uitzien. En gaan we de meest primitieve rollover maken.

#Code
1
2
3
4
5
6
7
8
9
10
11
ul#menu {
list-style: none;
}

ul#menu li a {
    color: red;
}

ul#menu li a:hover {
    color: black;
}


Nu hebben we dus een lijst met een rollover waarbij de tekst van rood naar zwart verandert.
Daar zijn we nog niet helemaal met tevreden natuurlijk, we gaan een achtergrondkleur zetten en een paar randjes toevoegen.

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul#menu {
    list-style: none;
}

ul#menu li a {
    color: red;
    border: #000 solid 1px;
    background: yellow;
}

ul#menu li a:hover {
    color: black;
    border: #000 solid 1px;

}


Nu lijkt dit natuurlijk helemaal niet op een menu, we gaan dus maken dat alle items even breed zijn, dit doen we met display: block;. Maar tegelijkertijd gaan we ook nog de rollover een beetje mooier maken door de achtergrondkleur te laten veranderen.
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul#menu {
    list-style: none;
    width: 100px;
}

ul#menu li a {
    color: red;
    border: #000 solid 1px;
    background: yellow;
    display: block;
}

ul#menu li a:hover {
    background: red;
    color: black;
    border: #000 solid 1px;
    display: block;
}


Als je nu je menu bekijkt in ie zal je zien dat het er niet helemaal juist uitziet, de listitems staan te ver uit elkaar en ook gedraagt niet het hele blokje zich als link, wat wel zo is in firefox. Dit gaan we fixen door simpelweg margin-top: none; bij de li's en width en height op 100% bij de anchors.

#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
ul#menu {
list-style: none;
width: 100px;
}

ul#menu li {
    margin-top: none;
}

ul#menu li a {
color: red;
border: #000 solid 1px;
background: yellow;
display: block;
height: 100%;
width: 100%;
}

ul#menu li a:hover {
background: red;
color: black;
border: #000 solid 1px;
display: block;
}


Nu heb je dus eigenlijk een volwaardig css menu met rollovers, dat werkt in firefox, opera en ie. Je kan zelf nog dingen aanpassen of toevoegen zoals kleuren, text-decoration, een afbeelding bij elk item, ...
Als je een beetje creatief bent, kun je op deze manier een prachtig menu creƫren voor op je website!

21 reacties
celinekeeee Geplaatst op 16-06-2010 om 21:43
 

Regular
HEt forum werkt bij mij niet dus dan maar hier en hopen op reactie.
IK heb een aantal plaatjes voor een menu nu wil ik dit graag in en menu zetten en als je er over heengaat met de muis moet het andere plaatje te voorschijn komen. IK ben voor mijzelf een portfolio aan het maken en dus de eerste keer dat ik bezig ben met html gebeuren
Nickn Geplaatst op 05-08-2008 om 09:10
 

Regular
in html: als ik dan op mijn menu home klik verdwijnt mijn menu . is er iets als hold of refresh ?
maarte Geplaatst op 19-06-2007 om 16:00
 

Regular
moet </li> aan het eind van elke regel/zin of enkel op het ?laatst?

edit/
sorry voor de dubel post mensen had niet door dat het vanboven staat .
maarte Geplaatst op 17-06-2007 om 14:18
 

Regular
waar moet die code staan?
maarte Geplaatst op 17-06-2007 om 14:13
 

Regular
waar moet die code tussen?

Pagina 1 2 3 4 5 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder