Tijden veranderen
Huidige pagina bepalen
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
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
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
<?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>";
}
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>";
}
IK doe het zo:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
function selected($id)
{
if(substr_count('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'], $id) > 0)
{
echo 'class="selected"';
}
}
?>
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:
Code (php)
1
2
3
2
3
$(function() {
$(' a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
$(' a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
Bron: http://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/
Gewijzigd op 22/07/2012 08:32:39 door Eddy E
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.
Maarre, graag gedaan hoor.
Dus ik houd het momenteel even bij dit.
Nogmaals dank :)
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
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;
};
};
// 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;
};
};
'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.
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.
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.