Goedemiddag!

Ik ben bezig met een site waarvoor ik het hoofdmenu zo wil aanpassen, dat de verschillende links enkel klik-baar zijn als de gebruiker zich niet op de pagina van de link bevindt. Ook wil ik dat de layout van de menu-knoppen verandert wanneer de bezoeker op die pagina is belandt.
Helaas ken ik geen functie of methode waarmee ik in php de huidige pagina kan controleren en de layout daarop kan aanpassen.
Heeft iemand wellicht een idee of kent iemand een goede manier om dit te doen, dan zou ik graag antwoord ontvangen.

Vriendelijke Groet,

Sytze

N.B

Ik heb tot nu toe deze code gebruikt:
Helaas werkt deze niet, ik krijg namelijk een syntax error
<?php
if (strstr($_SERVER['PHP_SELF']), 'index.php'){
echo "Home<br>\n";
} else {
echo "<a id=hfdmenurood href='index.php'>Home</a>";
} if (strstr($_SERVER['PHP_SELF']), 'nieuws.php'){
echo "Nieuws<br>\n";
} else {
echo "<a id=hfdmenuoranje href='nieuws.php'>Nieuws</a>";
} if (strstr($_SERVER['PHP_SELF']), 'informatie.php'){
echo "Informatie<br>\n";
} else {
echo "<a id=hfdmenugeel href='info.php.html'>Informatie</a>";
} if (strstr($_SERVER['PHP_SELF']), 'login.php'){
echo "Log in<br>\n";
} else {
echo "<a id=hfdmenugroen href='login.html'>Log in</a>";
} if (strstr($_SERVER['PHP_SELF']), 'registreren.php'){
echo "Registreren<br>\n";
} else {
echo "<a id=hfdmenublauw href='registreer.php'>Registreren</a>";
} if (strstr($_SERVER['PHP_SELF']), 'help.php'){
echo "Help<br>\n";
} else {
echo "<a id=hfdmenuindigo href='help.php'>Help</a>";
}if (strstr($_SERVER['PHP_SELF']), 'contact.php'){
echo "Contact<br>\n";
} else {
echo "<a id=hfdmenuviolet href='contact.php'>Contact</a>";
}
Met PHP kan dit zeker.
IK doe het zo:
<nav id="menu" class="screen_only">
	<div id="menu_kop_links"></div>			
	<a id="menu_o" tabindex="1" accesskey="o" href="/overzicht/" <?php selected("overzicht"); ?>><em>O</em>verzicht<br><i>Welkom</i></a>
	<a id="menu_a" tabindex="2"	accesskey="a" href="/agenda/" <?php selected("agenda"); ?>><em>A</em>genda<br><i>Kerkdiensten</i></a>
	<a id="menu_w" tabindex="3" accesskey="w" href="/wiezijnwij/" <?php selected("wiezijnwij"); ?>>Voorstellen<br><i><em>W</em>ie zijn wij</i></a>
	<a id="menu_v" tabindex="4" accesskey="v" href="/verenigingen/" <?php selected("verenigingen"); ?>><em>V</em>erenigingen<br><i>en colleges</i></a>
		<span class="rwd_break_600"><hr></span>
	<a id="menu_m" tabindex="5" accesskey="m" href="/meditatie/<?php echo nieuwste_meditatie_url(); ?>/" <?php selected("meditatie"); ?>><em>M</em>editatie</a>
	<a id="menu_f" tabindex="6" accesskey="f" href="/foto/" <?php selected("foto"); ?>><em>F</em>oto's</a>
	<a id="menu_u" tabindex="7" accesskey="u" href="/uitzending/" <?php selected("uitzending"); ?>><em>U</em>itzending <br><i>kerkdiensten</i></a>
	<a id="menu_c" tabindex="8" accesskey="c" href="/contact/" <?php selected("contact"); ?>><em>C</em>ontact<br><i>Links</i></a>
	<div id="menu_kop_rechts"></div>
</nav>		

En de PHP-functie is:
<?php
function selected($id)
	{
	if(substr_count('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'], $id) > 0)
		{
		echo 'class="selected"';
		}
	}
?>


Met die class laat ik het (iets) anders zien.
Kijk maar op www.hgbh.nl (menu bovenaan).
Wil je het niet klikbaar maken, kan je natuurlijk ook andere dingen doen.
Maar waarom mag het niet 'klikbaar' zijn? Staat dan gelijk aan een F5 wat je toch nooit tegenhoudt.



In Javascript:
$(function() {
  $(' a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

Bron: http://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/
Hartelijk dank!
En ik maak de knop niet klik-baar, als oefening voor mezelf en als extra signaal voor de gebruiker op welke pagina hij/zij zich bevindt.
Niet klikbaar kan je ook doen door een andere cursor te geven (dus niet het handje, maar het pijltje). Dan is/blijft het klikbaar (ook voor Google...), maar gebruikers zullen er dan nog maar nauwelijks op klikken. Je ziet als goed is welke pagina actief is in het menu.

Maarre, graag gedaan hoor.
Tjaa, ik ben nog maar een beginneling, dus ik weet niet of ik het veranderen van een cursor voor elkaar krijg.
Dus ik houd het momenteel even bij dit.
Nogmaals dank :)
Google even op "CSS cursor". Moet lukken.
Maar het veranderen van de cursor houdt niet in dat de link niet klikbaar wordt. Het geeft alleen niet aan dat er een link is, heel vreemd eigenlijk dat mensen zich zo laten beïnvloeden door de stijl/cursor: http://jsfiddle.net/HTxxE/embedded/result/

De enige oplossing die ik kan bedenken is om met javascript aan de gang te gaan, een onclick event te maken en die vervolgens return false mee te geven en e.preventDefault:
window.onload = function() {
    // pak 1 .active element en voeg een onclick event toe
    document.querySelector('.active').onclick = function(e) {
        // voorkom de browsers default gedrag
        e.preventDefault();

        // voor oude browsers
        return false;
    };
};
In dat geval kan je beter de <a> wijzigen naar een <b> of zo.
't Is waar dat het klikbaar blijft, maar nogmaals: is dat een probleem? In verband met usability misschien beter dat het geen veranderende optie is (maar dat zit hem in het UITERLIJK)... 't mag volgens mij best klikbaar blijven. Noem eens 1 reden waarom niet.

Op www.hghb.nl is het menu ook gekleurd (die geeft aan welke pagina je zit). Het blijft klikbaar. Waarom? Omdat het gelijk staat aan F5. En je ziet toch wel op welke pagina je zit.
Ik denk dat dat beter is inderdaad.
Niet alleen omdat de pagina toch altijd 'herlaad-baar' blijft met f5,
maar ook omdat het een stuk makkelijker wordt om te coderen.
Wat wel fijn is, aangezien ik nog niet zo professioneel ben.
Ja, iets weer weg-PHP-en is moeilijker dan niet doen?
Je hebt je menu toch al? Waarom die ingewikkeld maken door hem aan te passen?
Kijk even goed hoe simpel ik de mijne heb. Dat kan je wel iets aanpassen, maar 't menu wordt echt niet moeilijker.

Reageren