menu met css & php
Dit menu bestaat uit CSS en PHP, Natuurlijk kan het ook met MYSQL, maar we houden het op PHP. Het menu bestaat uit blokken en het kan eventueel met een sub menu.
Waarom post ik deze ??
Ik vond het wel leuk om hier neer te zetten, ik vond het niet echt een script, dus heb ik er een tutorial van gemaakt.
Door het vergeten te zijn om pagina's toe te voegen, Doe ik het allemaal maar op een pagina (sorry een foutje van mij)
We beginnen met CSS:
Dit is het menu voor CSS:
Code (php)
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
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
.menu {
width: 180px;
float: left;
text-align: justify;
padding-right: 5px;
font-weight: bold;
}
.menu a {
text-decoration: none;
padding: 5px;
background: #97AF01;
display: block;
padding-right: 5px;
border: 1px solid #FFFFFF;
width: 180px;
height: 25px;
line-height: 25px;
color: #FFFFFF;
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold;
}
.menu a:hover {
background: #CCCCCC;
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold;
}
width: 180px;
float: left;
text-align: justify;
padding-right: 5px;
font-weight: bold;
}
.menu a {
text-decoration: none;
padding: 5px;
background: #97AF01;
display: block;
padding-right: 5px;
border: 1px solid #FFFFFF;
width: 180px;
height: 25px;
line-height: 25px;
color: #FFFFFF;
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold;
}
.menu a:hover {
background: #CCCCCC;
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold;
}
Ik heb het geprobeerd op FF en IE, en word goed weer gegeven.
Hoe kan ik nou een menu maken??
maar een div met een classnaam 'menu'
Code (php)
1
2
2
<div class="menu">
</div>
</div>
Natuurlijk is dit nog niks, om een eerste indruk te krijgen voegen we een linkje tussen de div's toe:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="menu">
<a href="#">Pagina 1</a>
<a href="#">Pagina 2</a>
</div>
<a href="#">Pagina 1</a>
<a href="#">Pagina 2</a>
</div>
Het begint al wat te lijken. Maar nu wil je bij pagina 1 een sub menu. Dat is simpel, we nemen even als voorbeeld: ?pagina=phphulp.
Natuurlijk hebben we ook nog sub menu's gebruik daar de volgende CSS code voor:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
.sub_menu a {
text-decoration: none;
padding: 5px;
background: #FFFFFF;
display: block;
padding-right: 5px;
border: 1px solid #97AF01;
width: 150px;
height: 25px;
line-height: 25px;
color: #000000;
margin-left: 30px;
font-weight: bold;
}
text-decoration: none;
padding: 5px;
background: #FFFFFF;
display: block;
padding-right: 5px;
border: 1px solid #97AF01;
width: 150px;
height: 25px;
line-height: 25px;
color: #000000;
margin-left: 30px;
font-weight: bold;
}
De pagina code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
//laat hem wel eerst even controlleren....
if($_GET['pagina'] == "phphulp")
{
//maak daarna een div'je met de class 'Sub_menu'
echo'<div class="sub_menu">';
//daarna gewoon weer de links
echo'<a href="#">Lees scripts</a>';
echo'<a href="#">Plaats script</a>';
// en de div weer afsluiten:
echo'</div>';
}
?>
//laat hem wel eerst even controlleren....
if($_GET['pagina'] == "phphulp")
{
//maak daarna een div'je met de class 'Sub_menu'
echo'<div class="sub_menu">';
//daarna gewoon weer de links
echo'<a href="#">Lees scripts</a>';
echo'<a href="#">Plaats script</a>';
// en de div weer afsluiten:
echo'</div>';
}
?>
Voorbeeld van het geheel:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="menu">
<a href="?pagina=phphulp">Pagina 1</a>
<?php
//laat hem wel eerst even controlleren....
if($_GET['pagina'] == "phphulp")
{
//maak daarna een div'je met de class 'Sub_menu'
echo'<div class="sub_menu">';
//daarna gewoon weer de links
echo'<a href="#">Lees scripts</a>';
echo'<a href="#">Plaats script</a>';
// en de div weer afsluiten:
echo'</div>';
}
?>
<a href="#">Pagina 2</a>
</div>
<a href="?pagina=phphulp">Pagina 1</a>
<?php
//laat hem wel eerst even controlleren....
if($_GET['pagina'] == "phphulp")
{
//maak daarna een div'je met de class 'Sub_menu'
echo'<div class="sub_menu">';
//daarna gewoon weer de links
echo'<a href="#">Lees scripts</a>';
echo'<a href="#">Plaats script</a>';
// en de div weer afsluiten:
echo'</div>';
}
?>
<a href="#">Pagina 2</a>
</div>
Dus als je ?pagina=phphulp aanroept geeft hij het sub-menutje weer.
Dat was het dan!! Simpel toch (mijn CSS kan hier en daar nog wat beter, mochten mensen onnodige dingen er tussen zien, of heb ik niet iets duiderlijk uitgelegt, melt het even zodat ik het kan verbeteren.)