Menu Item kleuren

Door John De Zon op 03-04-2015 15:27 gewijzigd op 03-04-2015 16:03

2.552 views

Hallo,

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


<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


.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;
}

Alvast bedankt!

Christophe

Thomas van den Heuvel

03-04-2015 16:17 gewijzigd op 03-04-2015 16:19

De :active is alleen actief als je op de link klikt en je muisknop ingedrukt houdt.

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.

Frank Nietbelangrijk

04-04-2015 10:26 gewijzigd op 04-04-2015 23:58

<?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');

?>

(niet getest)

John De Zon

04-04-2015 11:06 gewijzigd op 04-04-2015 12:09

Frank,

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?

Frank Nietbelangrijk

04-04-2015 23:54

Wellicht even error reporting aanzetten. Liefst in php.ini

[size=xsmall]Toevoeging op 05/04/2015 00:04:38:[/size]

Er miste een paar haakjes. Heb je geen php editor?

Reageren

Inloggen om te reageren