2min

Tags in dit artikel

,

De style

Nu gaan we alles in style.css verwerken.

Als je het menu nu zou bekijken, zie je een opsommingslijst met allemaal bolletjes. In de eerste stap willen we deze weg hebben:

PHP Code
1
2
3
4
5
6
7
8
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #000000;
	width: 150px;
	z-index: 10;
}


De dikte van het menu zal hier 150 pixels zijn, en de boord onderaan zwart.
De Z-index heb’k hier op 10 gezet, dit is om te vermijden dat het menu verdwijnt onder de tekst, afbeeldingen ernaast. Steeds opnieuw in de volgende delen zul je dit zien.

Plaats nu de volgende code, deze is om de positie aan te geven.
PHP Code
1
2
3
4
ul li {
	position: relative;
	z-index: 10;
}


Nog steeds zijn we niet veel met ons menu, want we zien nu een lijst waarin de submenu’s uitspringen. Wij willen namelijk dat als we er over gaan, dat ze uit geschoven worden. De code hieronder is daar al een eerste stap naar:
PHP Code
1
2
3
4
5
6
7
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	z-index: 10;
}


Wat opvalt in de code hierboven is dat we de positie van de submenu’s 1 pixel minder hebben gezet dan de dikte van het menu. Dit is noodzakelijk om het menu mooi te laten aansluiten.

Laten we nu eens het menu een mooi kleurtje geven en rondom de menu-items een rechthoekje plaatsen. Dit zal al mooier overkomen:
PHP Code
1
2
3
4
5
6
7
8
9
10
ul li a {
	display: block;
	text-decoration: none;
	color: navy;
	background: #ffffff;
	padding: 5px;
	border: 1px solid #000000;
	border-bottom: 0;
	z-index: 10;
}


PHP Code
1
ul li a:hover { color: red; background: #7A7F76; }


Er zijn in Internet Explorer nu al een paar probleempjes, deze kan je met volgende code verhelpen:
PHP Code
1
2
3
 
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }


Om de submenu’s te laten uitklappen plaats je volgende code:
PHP Code
1
li:hover ul { display: block; }


Plaats voor de hover nog even volgende code:
PHP Code
1
2
li:hover ul, li.over ul { 
	display: block; }

Table of contents