Menu in CSS

Door op , 56646x 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 LTE

  Winkel Beoordeling Prijs Prijs inclusief porto
0_sterren € 139.60 € 139.60 Bekijken
0_sterren € 167.00 € 167.00 Bekijken
10_sterren € 172.99 € 179.98 Bekijken
0_sterren € 180.80 € 180.80 Bekijken
0_sterren € 177.00 € 180.95 Bekijken
Bekijk de prijzen van alle 16 winkels.

Nieuw op Techzine

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