Menu Item kleuren
ik ben al de hele tijd bezig met het proberen als iemand op mijn website zit op home bv. dat de home knop een andere kleur krijgt.
Tot nu toe, is dat niet gelukt wat doe ik fout? (Alleen het nodige deel HTML en CSS staat in de code)
HTML Code
Code (php)
1
2
3
4
2
3
4
<ul>
<li class="menu-item"><a href="./index.php" />Home</a></li>
<li class="menu-item"><a href="#" />Over ons</a></li>
</ul>
<li class="menu-item"><a href="./index.php" />Home</a></li>
<li class="menu-item"><a href="#" />Over ons</a></li>
</ul>
CSS Code
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
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
.menu-item a:link, .menu-item a:visited {
display: block;
width: 200px;
height: 50px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
background: #004A95;
}
.menu-item a:hover, .menu-item a:active {
background-color: #06C;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
display: block;
width: 200px;
height: 50px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
background: #004A95;
}
.menu-item a:hover, .menu-item a:active {
background-color: #06C;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
Alvast bedankt!
Christophe
Gewijzigd op 03/04/2015 16:03:55 door - Ariën -
De HTML zelf kan niet weten op welke pagina je zit, dus dit zul je op een of andere manier moeten aangeven. Hierbij maak je bijvoorbeeld gebruik van een extra "active" class.
Als je op je homepage zit moet de class van het eerste list item ingesteld worden op "menu-item active", als je op je "over ons" pagina zit moet je tweede list item deze class bevatten et cetera. Dit staat dus op een of andere manier expliciet in je broncode.
Meestal worden pagina's (en dus ook de menu's) dynamisch opgebouwd waarbij dus programmatisch zo'n "active" class aan de juiste navigatie-items wordt toegevoegd.
Gewijzigd op 03/04/2015 16:19:12 door Thomas van den Heuvel
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php
function buildMenu($menu, $activePage = '')
{
$html = '<ul>';
foreach($menu as $key => $item)
{
if(isset($item['label']))
{
$class = '';
if(isset($item['class']))
$class = ' class="' . $item['class'] . '"';
if(strtolower($key) == strtolower($activePage))
{
if(strlen($class))
$class .= ' active';
else
$class = 'active';
}
$href = '#';
if(isset($item['href']))
$href = ' href="' . $item['href'] . '"';
$title = '';
if(isset($item['title']))
$title = ' title="' . $item['title'] . '"';
$target = '';
if(isset($item['target']))
$target = ' target="' . $item['target'] . '"';
$html .= '<li><a' . $class . $href . $target . $title . '>' . $item['label'] . '</a></li>';
}
}
return $html . '</ul>';
}
$menu = array(
'home' => array(
'href' => 'index.php',
'label' => 'Home',
'title' => 'Terug naar de Homepage',
),
'about' => array(
'href' => 'about.php',
'label' => 'Over ons',
'title' => 'Informatie over onze organisatie',
),
'google' => array(
'href' => 'http://google.nl',
'label' => 'Google',
'title' => 'Google',
'target' => 'new',
),
);
echo buildMenu($menu, 'home');
?>
function buildMenu($menu, $activePage = '')
{
$html = '<ul>';
foreach($menu as $key => $item)
{
if(isset($item['label']))
{
$class = '';
if(isset($item['class']))
$class = ' class="' . $item['class'] . '"';
if(strtolower($key) == strtolower($activePage))
{
if(strlen($class))
$class .= ' active';
else
$class = 'active';
}
$href = '#';
if(isset($item['href']))
$href = ' href="' . $item['href'] . '"';
$title = '';
if(isset($item['title']))
$title = ' title="' . $item['title'] . '"';
$target = '';
if(isset($item['target']))
$target = ' target="' . $item['target'] . '"';
$html .= '<li><a' . $class . $href . $target . $title . '>' . $item['label'] . '</a></li>';
}
}
return $html . '</ul>';
}
$menu = array(
'home' => array(
'href' => 'index.php',
'label' => 'Home',
'title' => 'Terug naar de Homepage',
),
'about' => array(
'href' => 'about.php',
'label' => 'Over ons',
'title' => 'Informatie over onze organisatie',
),
'google' => array(
'href' => 'http://google.nl',
'label' => 'Google',
'title' => 'Google',
'target' => 'new',
),
);
echo buildMenu($menu, 'home');
?>
(niet getest)
Gewijzigd op 04/04/2015 23:58:39 door Frank Nietbelangrijk
Als ik dit aan mijn code toevoeg wil de pagina niet laden gewoon een wit scherm.
Kan ik niet met PHP met een $_GET method detecteren op welke pagina ik zit?
Gewijzigd op 04/04/2015 12:09:00 door John De Zon
Toevoeging op 05/04/2015 00:04:38:
Er miste een paar haakjes. Heb je geen php editor?