Menu in CSS

Door op , 55721x 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: Samsung Galaxy S5

  Winkel Beoordeling Prijs Prijs inclusief porto
0_sterren € 627.99 € 627.99 Bekijken
0_sterren € 635.00 € 635.00 Bekijken
0_sterren € 653.00 € 653.00 Bekijken
0_sterren € 646.89 € 653.88 Bekijken
0_sterren € 654.90 € 654.90 Bekijken
Bekijk de prijzen van alle 33 winkels.

Nieuw op Techzine

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