Menu met semantische html en css (horizontaal)

Info 
Door: pinkyboy Moeilijkheidsgraad: 1/3
Views:39.892Reacties: 18(Bekijken)
  Log in om zelf te reageren
 Waardering:5.3/10 (3 stemmen)



Zoals je aan de titel kunt zien is dit het vervolg op mijn vorige tut. In die tut toonde ik hoe je op een semantische manier een menu kan maken.
Omdat het nogal vaak gevraagd wordt op het forum ga ik hier even tonen hoe je dan een horizontaal menu kan maken.
We keren even terug naar de code van vorige keer, als je deze code niet begrijpt kan je beter even naar de eerste tut kijken aangezien ik er hier geen uitleg meer bij geef.

#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
28
29
30
31
32
<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>


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;
}


Om dit menu horizontaal te maken moeten we eigenlijk niet veel doen, we gaan gewoon bij "ul#menu li", de list-items dus, iets nieuw toevoegen, namelijk "display: inline". Dat zorgt ervoor dat de list-items na elkaar worden gezet in plaats van onder elkaar.
#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
28
29
30
31
32
33
<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>


ul#menu {
list-style: none;
width: 100px;
}

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

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;
}


Als je dit nu in de browser bekijkt zie je dat het resultaat verschrikkelijk is. Dat komt door de "display: block" die bij de anchors staat. Halen we die weg zijn er geen problemen meer, en hebben we het menu dat we wilden.
De uiteindelijke code:
#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
28
29
30
31
32
<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>


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;
}


Om dit menu horizontaal te maken moeten we eigenlijk niet veel doen, we gaan gewoon bij "ul#menu li", de list-items dus, iets nieuw toevoegen, namelijk "display: inline". Dat zorgt ervoor dat de list-items na elkaar worden gezet in plaats van onder elkaar.
#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
28
29
30
31
<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>


ul#menu {
list-style: none;
width: 100px;
}

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

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

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


Ziezo, dat was het dan weer, ik hoop dat je er wat aan hebt!

18 reacties
Onbekend lid Geplaatst op 30-03-2011 om 12:20
 

Spammer
Hallo allemaal,

Ik heb een horizontale menu geplaatst op mijn webpagina, dat heb ik op internet gevonden, de menu werkt goed ik heb top menu dat zijn de items boven, en onder elke item kun je een submenu maken dat is opzich geen probleem maar als ik nog een subsubmenu toevoegen dat weet ik niet hoe, iemand een idee?
Hier mn code
<ul class="menu">
<li class="top"><a href="" target="_self" class="top_link"><span>Top Menu</span></a>
<ul class="sub">
<li><a href="" target="_self">Submenu</a></li>
</ul>
</li>
</ul>


.bg
{
background: url('../images/button4.gif');
}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url('../images/button1a.gif') repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url('../images/down.gif') no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url('../images/button4.gif') no-repeat;}
.menu li a.top_link:hover span {background:url('../images/button4.gif') no-repeat right top;}
.menu li a.top_link:hover span.down {background:url('../images/button4a.gif') no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url('../images/button4.gif') no-repeat;}
.menu li:hover > a.top_link span {background:url('../images/button4.gif') no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url('../images/button4a.gif') no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url('../images/arrow.gif') 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#42c555 url('../images/arrow_over.gif') 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#42c555 url('../images/arrow_over.gif') 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}
hicham4 Geplaatst op 30-03-2011 om 10:30
 

Regular
Hallo allemaal,

Ik heb een horizontale menu geplaatst op mijn webpagina, dat heb ik op internet gevonden, de menu werkt goed ik heb top menu dat zijn de items boven, en onder elke item kun je een submenu maken dat is opzich geen probleem maar als ik nog een subsubmenu toevoegen dat weet ik niet hoe, iemand een idee?
Hier mn code
<ul class="menu">
<li class="top"><a href="" target="_self" class="top_link"><span>Top Menu</span></a>
<ul class="sub">
<li><a href="" target="_self">Submenu</a></li>
</ul>
</li>
</ul>


.bg
{
background: url('../images/button4.gif');
}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url('../images/button1a.gif') repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url('../images/down.gif') no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url('../images/button4.gif') no-repeat;}
.menu li a.top_link:hover span {background:url('../images/button4.gif') no-repeat right top;}
.menu li a.top_link:hover span.down {background:url('../images/button4a.gif') no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url('../images/button4.gif') no-repeat;}
.menu li:hover > a.top_link span {background:url('../images/button4.gif') no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url('../images/button4a.gif') no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url('../images/arrow.gif') 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#42c555 url('../images/arrow_over.gif') 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#42c555 url('../images/arrow_over.gif') 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}
hicham4 Geplaatst op 30-03-2011 om 10:22
 

Regular
Hallo allemaal,

Ik heb een horizontale menu geplaatst op mijn webpagina, dat heb ik op internet gevonden, de menu werkt goed ik heb top menu dat zijn de items boven, en onder elke item kun je een submenu maken dat is opzich geen probleem maar als ik nog een subsubmenu toevoegen dat weet ik niet hoe, iemand een idee?
Hier mn code
<ul class="menu">
<li class="top"><a href="" target="_self" class="top_link"><span>Top Menu</span></a>
<ul class="sub">
<li><a href="" target="_self">Submenu</a></li>
</ul>
</li>
</ul>


.bg
{
background: url('../images/button4.gif');
}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url('../images/button1a.gif') repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url('../images/down.gif') no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url('../images/button4.gif') no-repeat;}
.menu li a.top_link:hover span {background:url('../images/button4.gif') no-repeat right top;}
.menu li a.top_link:hover span.down {background:url('../images/button4a.gif') no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url('../images/button4.gif') no-repeat;}
.menu li:hover > a.top_link span {background:url('../images/button4.gif') no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url('../images/button4a.gif') no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url('../images/arrow.gif') 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#42c555 url('../images/arrow_over.gif') 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#42c555 url('../images/arrow_over.gif') 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}
Ciagraprofessional54vjn Geplaatst op 12-04-2010 om 17:20
 

Regular
hier is iets dat wel werkt.

<ul id="menu">
<li><a href="home" class="menu">home</a>
<li><a href="info.html" class="menu">info</a>
<li><a href="nieuws.html" class="menu">nieuws</a>
<li><a href="contact.html" class="menu">contact</a>
</ul>


ul#menu {
list-style: none;
width: 100px;
}

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

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

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

wat ik heb gedaan is gewoon de height en width veranderd.
in plaats van procenten staat er nu gewoon:

height: 20;
width: 100;

hopelijk helpt dit.
groofke Geplaatst op 19-07-2009 om 15:05
 

Regular
Ik heb het volgende:

#menu ul li a
{padding: 1px; margin: 0;}
#menu ul,
#menu ul li
{list-style-type: none;
display: inline;
padding: 0;
marging: 0;}
#menu
{float: center;
padding: 0;
marging: 1px 0;
text-align: center;}


Echter staat dit niet naast elkaar, maar nog steeds onder elkaar, wat doe ik fout?

Pagina 1 2 3 4 

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