Dag mensen,

Ik vroeg me eigen af wat de CSS code (of achterliggende gedachten) was met deze techniek:

http://www.ezcompany.nl/index

je zit bv. op de Home pagina (daar is rechtsboven het menu een grijze vlak om Home) wanneer je naar een andere pagina gaat gebeurd er hetzelfde.

Ik ken de Hover natuurlijk maar vroeg me eigen af wat het nou was wanneer je eenmaal op de pagina zelf zit.

Thanks for the tip!

Zelf doe ik dat soort dingen altijd met PHP... als pagina = cms, geef class .active

Je kunt het met de hand doen, iedere pagina zelf de pagina zelf bold en de kleur veranderen. Maar het is simpeler om het met, zoals Ben al zei, PHP te doen. Gaat het automatisch, en dat is dan ook de 'nettere' manier om dit op te lossen.

Ben ik nou gek of is dit gewoon de active functie in de css? :o.. of begrijp ik het nou niet?

Origineel gepost door gast26966

Je kunt het met de hand doen, iedere pagina zelf de pagina zelf bold en de kleur veranderen. Maar het is simpeler om het met, zoals Ben al zei, PHP te doen. Gaat het automatisch, en dat is dan ook de 'nettere' manier om dit op te lossen.

haha ja dat snap ik, maar ik refereerde meer na een mooie oplossing zoals PHP zoals men dat aan geeft.

Maar goed, wat dan in de css heb ik ook een active rule dat doet precies tzelfde ook al doe ik dit met php??

De :active pseudo-class gebruik je voor de state van de link wanneer de bezoeker klikt (niet de active state die Rick wenst te creeëren dus).

Ben,

Ik kan je even niet helemaal volgen.

Ik gebruik de volgende css class voor de links

Code:

a.Menu:link {color:#000; font-family:Arial; font-size:12px; text-decoration:none;}     
a.Menu:visited {color:#000; font-family:Arial; font-size:12px; text-decoration:none;}      
a.Menu:hover {color: #ccc; font-family:Arial; font-size:12px; text-decoration:none;}    
a.Menu:active {color:#red; font-family:Arial; font-size:12px; text-decoration:none;}

Maar dan moet je toch op elke pagina aangeven welke link de actieve is?

Groetjes Astrid.

Zoals ik zei, :active is voor de klikactie van een link. Als je de huidige pagina wilt weergeven moet je met PHP en een toe te wijzen 'active' class werken.

Denk er trouwens om dat je de classnamen in kleine letters houdt (a.menu dus, i.p.v. a.Menu). Verder is shorthand CSS aan te raden, zeker als je begint met CSS leren. Je kunt het jezelf maar beter gelijk goed aanleren. Bijv:

Code:

font-family: Arial; font-size: 12px; font-weight: bold;

Daar kun je beter van maken:

Code:

font: bold 12px Arial;

In een voorgaand project gebruikte ik onderstaande om #actief te plaatsen bij juiste de actieve pagina:

PHP Code:

<li<?php echo(basename($_SERVER['REQUEST_URI']) == 'index' ? ' id="actief"' : '');?>><a href="index">Home</a></li>
<li<?php echo(basename($_SERVER['REQUEST_URI']) == 'wie' ? ' id="actief"' : '');?>><a href="wie">Wie zijn wij?</a></li>

Origineel gepost door S. van Laere

In een voorgaand project gebruikte ik onderstaande om #actief te plaatsen bij juiste de actieve pagina:

PHP Code:

<li<?php echo(basename($_SERVER['REQUEST_URI']) == 'index' ? ' id="actief"' : '');?>><a href="index">Home</a></li>
<li<?php echo(basename($_SERVER['REQUEST_URI']) == 'wie' ? ' id="actief"' : '');?>><a href="wie">Wie zijn wij?</a></li>

kan je dan niet beter gewoon

PHP Code:

<li class='<?php echo $state; ?>'><a.....>kljkj</a></li>

en die rim ram beperken met een switch ?

je kan ook doormiddel van jquery de class gaan bewerken met dom.

U kunt het ook met afbeeldingen doen, maar dat moet je op elke pagina aangeven.

Origineel gepost door bernard Schelfout

kan je dan niet beter gewoon

PHP Code:

<li class='<?php echo $state; ?>'><a.....>kljkj</a></li>

en die rim ram beperken met een switch ?

je kan ook doormiddel van jquery de class gaan bewerken via dom

Er leiden meer wegen naar Rome zo blijkt eens te meer.
jQuery vereist javascript, ben je met PHP beter af.

je haalt je pagina titles uit de db
Dit doe je toch al om het menu weer te geven in de pagina

zet ze in een array...
lees de array uit en dmw. een simpele if statement bepaal je of
de value == de huidige pagina ... indien dit het geval is $state = 'active';

Waarom zou je dat met afbeeldingen doen

EDIT : dat is waar, php geeft zekerheid dat het bij iedereen werkt...
Maar wat ik zei is gewoon php hoor ;) omdat de code daarboven nogal repetitief is
sorry (bloos)
gaf gewoon aan dat het ook met jquery ( of eventueel javascript ) kan. Op zich belet dit niet
het gebruik van de site dus waarom zou je geen jquery gebruiken...het ergste dat kan gebeuren is dat sommige gebruikers die javascript niet hebben ?? het active gebeuren niet kunnen zien, voor de rest knn ze wel navigeren toch ?

Ik snap het al!

Ga er mee aan de gang in PHP en hoop dat het lukt =)

Bedankt
Aanvullend bericht:
Mochten mensen in de toekomst het ook willen proberen

Zie hier de code die ik gebruikt heb

PHP Code:

<?php 
function returnClass($sLink) 
{ 
    if(isset($_GET['p']) && ($_GET['p'] == $sLink)) 
    { 
        return ' class="menu_select"'; 
    } 
    else 
    { 
        return ' class="menu"'; 
    } 
} 

echo '<ol>'; 
echo '<li'.returnClass('homepage').'><a href="?p=homepage">HOME</a></li>'; 
echo '<li'.returnClass('contact').'><a href="?p=contact">Contact</a></li>'; 
echo '</ol>'; 
?>