vraag over menu
Robert Jansen
10/05/2012 16:20:18hallo,
ik heb de volgende vraag: ik heb een menu in html:
<ul>
<li ><a href="home.html" target="rechts">home</a></li>
<li class="active"><a href="producten.html" target="rechts">Producten </a></li>
<li><a href="referenties.html" target="rechts">Referenties </a></li>
<li><a href="contact.html" target="rechts">Contact </a></li>
</ul>
het is de bedoeling dat als de gebruiker op de home.html pagina kijkt dat er het woord home een rode achtergrond krijgt. en als de gebruiker producten.html aanklikt dat dan de rode achtergrond van home.html verdwijnt en verplaatst wordt naar producten.html. Dus eigenlijk als de gebruiker op een huidige pagina kijkt dat er in het menu bij het desbetreffende woord een rode achtergrond te zien is.
mijn vraag is hoe doe ik dit in css?
alvast bedankt.
ik heb de volgende vraag: ik heb een menu in html:
<ul>
<li ><a href="home.html" target="rechts">home</a></li>
<li class="active"><a href="producten.html" target="rechts">Producten </a></li>
<li><a href="referenties.html" target="rechts">Referenties </a></li>
<li><a href="contact.html" target="rechts">Contact </a></li>
</ul>
het is de bedoeling dat als de gebruiker op de home.html pagina kijkt dat er het woord home een rode achtergrond krijgt. en als de gebruiker producten.html aanklikt dat dan de rode achtergrond van home.html verdwijnt en verplaatst wordt naar producten.html. Dus eigenlijk als de gebruiker op een huidige pagina kijkt dat er in het menu bij het desbetreffende woord een rode achtergrond te zien is.
mijn vraag is hoe doe ik dit in css?
alvast bedankt.
PHP hulp
09/12/2024 01:03:10Wouter J
10/05/2012 16:33:20Je moet dan met JavaScript of PHP de li element een bepaalde class meegeven (bijv. .active) die kun je dan stijlen met CSS.
Robert Jansen
10/05/2012 16:38:55bedoel je dan met jQuery: click event met addClass. En dan met de addClass voeg je een achtergrondkleur toe?
Wouter J
10/05/2012 16:47:25Nee. Ik bedoel dat je in JavaScript de url pakt en die vergelijkt met de url in de nav items en dan de gene die overeenkomt een class meegeeft. Zoiets:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
(function(window, undefined) {
var document = window.document,
location = window.location.pathname || document.location.pathname;
navItems = document.getElementById('nav').getElementsByTagName('li');
for (i=-1; item = navItems[++i]; ) {
if (item.children[0].href == location) {
item.classList.add('active');
}
}
})(window);
var document = window.document,
location = window.location.pathname || document.location.pathname;
navItems = document.getElementById('nav').getElementsByTagName('li');
for (i=-1; item = navItems[++i]; ) {
if (item.children[0].href == location) {
item.classList.add('active');
}
}
})(window);