Menu in CSS

Door op , 55735x bekeken

Het menu

Een menu met submenu's. Dat willen vele mensen wel op hun site hebben, maar om een goed werkende te hebben, daar zijn uit eigen ervaring heel wat mensen naar op zoek. In deze tutorial leer ik je hoe je een menu, in juist CSS, kan laten werken, bovendien ook in Internet Explorer.

Je hebt drie files nodig. 'index.html', 'style.css' en 'menu.js'.
We beginnen in index.html:

PHP 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 id="nav"> 
	<li><a href="#">Menu 1</a> 
		<ul>
			<li><a href="#">Submenu 1</a></li> 
			<li><a href="#">Submenu 2</a></li> 
			<li><a href="#">Submenu 3</a></li> 
		</ul> 
	</li> 
	<li><a href="#">Menu 2</a> 
		<ul>
			<li><a href="#">Submenu 4</a></li> 
			<li><a href="#">Submenu 5</a></li> 
			<li><a href="#">Submenu 6</a></li>
			<li><a href="#">Submenu 7</a></li> 
			<li><a href="#">Submenu 8</a></li> 
		 </ul> 
	 </li> 
	 <li><a href="#">Menu 3</a></li> 
	 <li><a href="#">Menu 4</a> 
	 	<ul> 
	 		<li><a href="#">Submenu 9</a></li> 
		</ul>
	 </li> 
 </ul>


In de eerste, tweede en vierde zie je submenu's, in de derde zie je dat er geen submenu's te zien zijn. Dit kan dus ook gewoon.

Speciale aanbieding: Motorola Moto G

  Winkel Beoordeling Prijs Prijs inclusief porto
0_sterren € 162.98 € 169.97 Bekijken
0_sterren € 167.92 € 170.87 Bekijken
0_sterren € 167.00 € 173.95 Bekijken
0_sterren € 174.99 € 174.99 Bekijken
0_sterren € 174.99 € 174.99 Bekijken
Bekijk de prijzen van alle 32 winkels.

Nieuw op Techzine

  • Alles
  • Smartphones
  • Tablets
  • Laptops
  • Apps
  • IT-Pro