Highlighting current page

Waarschijnlijk moet je hier mee gaan werken:

<?php
//Source: http://www.scriptygoddess.com/archives/2007/07/13/use-php-to-get-the-current-pagefile-name/
$currentFile = $_SERVER["PHP_SELF"];
$parts = Explode('/', $currentFile);
echo $parts[count($parts) - 1];
?>

Op de pagina index.php zal dit echoën: index.php

hiermee kun je dus binnen je bestand met if'jes checken welke pagina er is en die de class highlight meegeven.

MvG,
Kenneth

Google eens op addclass current page. Met jquery kun je ook een functie toevoegen die een class toevoegt aan een <li>.

@Kenneth
Thanks voor je help, :)
eerste reactie: link home kleurt nu als je hem ingedrukt houd, hij blijft nog niet ingekleurt als je op die home pagina blijft.
Verder verschijnt index.php in beeld op de indexpagina als gevolg van de echo.

@Colin,
bedankt ik ga verder zoeken :)

In je eerste gedeelte laat je PHP zien, met includes en een link naar index.php en vervolgens een list met html pagina's?
Als het toch PHP pagina's zijn zou ik het als volgt doen.

<?php
$pages = Array(
	'Home' => '/index.html'
	,'Product' => '/product.html'
	,'About' => '/about.html'
	,'Contact' => '/contact.html'
);

echo '<ul class="navigation">'.PHP_EOL;

foreach($pages AS $title=>$page){
	echo '<li><a href="' . $page . '"' . ($page == $_SERVER['SCRIPT_NAME'] ? ' class="highlight"' : '') . '>' . $title . '</a></li>'.PHP_EOL;
}

echo '</ul>'.PHP_EOL;
?>

edit: </a> vergeten :)

@Michael

Allereerst thanks, je helpt me al wat verder.

Die html pagina's waren een voorbeeld wat voor een systeem niet werkt op mijn site. Alle pagina's op mijn site zijn dus wel php-pagina's.

Maar wat jouw code doet is: het geeft 4 list items :)
Deze reageren vervolgens op deze css:

/* Links: */
a:link {color:#616dbf;text-decoration:none;font-weight:bold;}      /* unvisited link */
a:visited {color:#931ea4;text-decoration:none;font-weight:bold;}  /* visited link */
a:hover {color:#FF00FF;text-decoration:none;font-weight:bold;}  /* mouse over link */
a:active {color:#0000FF;text-decoration:none;font-weight:bold;}  /* selected link */ 

en van mijn navigation class reageert het menuutje op:

.navigation ul 
.navigation li	

Het menuutje zou ook moeten reageren op: maar dat gebeurt niet.

.navigation ul a 
.navigation ul a:hover 
.navigation ul a:active 

Verder is het probleem dat een link alleen gekleurd wordt (met a:active) als je de link ingedrukt houd. Als je op een pagina zit, dan wordt die niet automatisch gekleurd in het menu :(


Toevoeging op 28/01/2014 11:12:44:

Ook op highlight wordt niet gereageerd.

.highlight{
	color:#C90C0F;}

Wil je nou wel of niet een list met items :) Dat wordt meestal gebruikt als menu, dus ik ga er vanuit dat dat ook jouw idee was.

active betekend inderdaad wanneer je het hebt ingedrukt, dus dat is precies wat ie doet.

.highlight{color:#c90c0f;} kan ook niet op een link

Als je het op de link wilt doe je een a ervoor.

a.highlight{color:#c90c0f;}

Of als je hem op de list item wilt

.highlight{background-color:#c90c0f;}

Toevoeging op 28/01/2014 11:43:55:

Example

Thanks, door dat a-tje doet hij het wel :-)
Ik heb gewoon een normaal menu met list-items btw.

Heb je trouwens een idee waarom de ul a, ul a:hover en ul a:highlight het niet (meer) doen?

/* Menu */
.navigation ul{ 
	List-style-type: none;
	height: 40px;
        margin: 5px;
	padding: 0;
}

/* Tabbladen menu */
.navigation li{	
	float: left;	
  	padding: 0;
  	margin: 0;
  	list-style: none;
  	min-height: 50px;
}
	
/* link menu */
.navigation ul a {
	padding-right: 10px;
    padding-left: 10px;
    text-decoration: none;
    font-size: 20px;
	font-weight: bold;
    color: #616dbf;
	background: none;

/* Tijd kleurverandering terug */
  	-webkit-transition: background 0.5s;
  	-moz-transition: background 0.5s;
  	-o-transition: background 0.5s;
  	-ms-transition: background 0.5s;
  	transition: background 0.5s;
}
	
/* mouse over link menu */
.navigation ul a:hover {
	color: #FFF;
	background: #1a298e;
	
/* Tijd kleurverandering heen */
  	-webkit-transition: background 0.3s;
  	-moz-transition: background 0.3s;
  	-o-transition: background 0.3s;
  	-ms-transition: background 0.3s;
 	 transition: background 0.3s;
} 

.navigation ul a:highlight {
	color:#C09D0B;
	background: #1a298e;
}

/* Menu */
.navigation ul{ 
    list-style-type: none;
    margin: 5px;
    padding: 0;
}

/* Tabbladen menu */
.navigation li{    
    float: left;    
    padding: 0;
    margin: 0;
    list-style: none;
}
.navigation > li a {
    padding: 0 10px; //Is het zelfde als padding-right: 10px; padding-left: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: #616dbf;
    height:50px;
    display:block;
    line-height:50px;

/* Tijd kleurverandering terug */
      -webkit-transition: background 0.5s;
      -moz-transition: background 0.5s;
      -o-transition: background 0.5s;
      -ms-transition: background 0.5s;
      transition: background 0.5s;
}
    
/* mouse over link menu */
.navigation > li a:hover {
    color: #FFF;
    background: #1a298e;
    
/* Tijd kleurverandering heen */
      -webkit-transition: background 0.3s;
      -moz-transition: background 0.3s;
      -o-transition: background 0.3s;
      -ms-transition: background 0.3s;
      transition: background 0.3s;
} 

.navigation > li a.highlight {
    color:#C09D0B;
    background: #1a298e;
}

Zo zou het moeten werken.
.navigation ul aangepast naar .navigation > li. De link zit immers niet in de ul.
a:highlight verandert naar a.highlight
display:block toegevoegd aan de a voor de height. Ik neem aan dat deze op de knop moet? Op de li heeft dit weinig zin.
Zie ook nogmaals het voorbeeld
Daarnaast zou je CSS nog wat mooier kunnen, maar gaat er nu om dat het werkt :)

edit: height toegevoegd en line-height toegevoegd.

Fabian, is het gelukt?

Jazeker, bedankt. Ik dacht dat ik hier gister al een reactie op had geschreven, maar blijkbaar is dat niet goed gegaan.