[CSS] Actieve menu knop

[Verwijderd]

Hoihoi,

ik ben al even opzoek naar een manier om een mijn menuknop er anders uit te laten zien als hij actief is. Ik maak nu al gebruik van hover, de knop ziet er anders uit als je er met je muis overheen gaat. Alleen ik wil ook dat mijn menuknop er anders uit ziet wanneer je erop geklikt hebt.

Bijvoorbeeld

Zo is mijn menu als je er niets mee doet:

home overons contact

Zo is mijn menu als je er met je muis over gaat (hover):

home overons contact

En dan als je op over ons klikt:

home overons contact

Als je dan weer op contact klikt moet hij zo zijn:

home overons contact


Hoe moet je dit declareren in je css???

Bij voorbaat dank.

Groeten, Michael

[RobIII]

Wat dacht je van een class "activeitem" of iets dergelijks declareren en daarin je gewenste style te definieëren? En bij het opbouwen van het menu zet je die class:

HTML:

<ul>
  <li>home</li>
  <li class="activeitem">overons</li>
  <li>contact</li>
</ul>

Hoe je die class zet is afhankelijk van hoe je je menu gebruikt; vanuit JS kun je bijvoorbeeld de className property gebruiken; gebruik je PHP oid dan zul je de class op het moment van het genereren van de menuitems moeten zetten.

Of kijk eens naar de :active pseudo class; echter is die alleen voor het actieve element op een gegeven moment; focus je een tekstbox oid dan is het andere element dus niet meer "active" (en dus waarschijnlijk niet wat je wil).

[ Voor 58% gewijzigd door RobIII op 14-07-2009 10:53 ]

[Verwijderd]

Bedankt voor je reactie
Goed punt.

Ik gebruik nu html voor het home-page en daarna wil ik overgaan op php.
Ik heb al uitvoerig gekeken naar de active pseudo class maar daarmee kreeg ik niet het desgewenste resultaat.
Het menu moet uiteindelijk vergelijkbaar worden met die van de apple site (www.apple.nl).

Ik gebruik 3 afbeelding:
- Afbeelding 1 wordt getoond zonder actie.
- Afbeelding 2 wordt getoond als je er met je muis overheen gaat (hover)
- Afbeelding 3 moet worden getoond wanneer die knop actief is.

Het is mij alleen nog niet gelukt. Is dit haalbaar in css?? Ik heb redelijk wat (niet super veel) kennis over html en css. Js en java heb ik ook wel eens gebruikt. En met PHP ga ik nog aan de slag. Is dit een haalbaar plan of zeg je dat ik het beter kan vergeten??

Bij voorbaat dank!

[RobIII]

Verwijderd schreef op dinsdag 14 juli 2009 @ 14:22:
Is dit haalbaar in css??

Ja.

Verwijderd schreef op dinsdag 14 juli 2009 @ 14:22:
Is dit een haalbaar plan of zeg je dat ik het beter kan vergeten??

Het wordt praktisch op elke site gedaan Kijk eens in een willekeurige site in de HTML (en CSS) broncode? Zelfs hier in dit topic zie ik een "<li class="active">" op het "Forum menu" staan. Webwereld.nl gebruikt een li met class "active", nu.nl gebruikt een li met class "selected", YouTube gebruikt een li met "category-selected" etc. Installeer Firbug eens of de Webdeveloper toolbar (onder FireFox that is; sowieso een "vereiste" als je een beetje serieus wil gaan webdevven naast IE, Opera, Chrome, Safari etc.)

[ Voor 37% gewijzigd door RobIII op 14-07-2009 14:32 ]

[Joolee]

Zoals RobIII ook in zijn post vermeld kun je een li of ul element een class naam meegeven.
Het ligt er een beetje aan hoe je pagina in elkaar zit (frames? menu op iedere pagina opnieuw opgebouwd?) of dat makkelijk is.
Als je gebruik maakt van frames kun je wellicht een javascriptje gebruiken om de class naam toe te kennen aan de actieve knop.

[Verwijderd]

Owke.

Mijn site is als volgt opgebouwd:

Ik heb alles in css gedeclareerd, de afbeeldingen en kleuren etc.
- Menu menu heb ik knop voor knop gedeclareerd en naast elkaar geplaats in css.
- Daarna komt mijn header
- Daarna mijn titelbar
- Daarna mijnhoofdtekst vlak
- Daarna mijn onderveld (email knop etc.)

Ik geef dit weer ik html dmv:

<div id="...."> </div>

Hoe moet ik dan:

<ul>
<li>home</li>
<li class="activeitem">overons</li>
<li>contact</li>
</ul>

Daaromheen weergeven???

Groeten.

[Verwijderd]

Joolee schreef op dinsdag 14 juli 2009 @ 14:27:
Het ligt er een beetje aan hoe je pagina in elkaar zit (frames? menu op iedere pagina opnieuw opgebouwd?) of dat makkelijk is.

Ik declareer het via css en wordt op iedere pagina alleen opnieuw geladen.

Joolee schreef op dinsdag 14 juli 2009 @ 14:27:
Als je gebruik maakt van frames kun je wellicht een javascriptje gebruiken om de class naam toe te kennen aan de actieve knop.

Hoe moet ik dat doen in js?? Ik ben niet goed met js

[RobIII]

Verwijderd schreef op dinsdag 14 juli 2009 @ 14:22:
Is dit haalbaar in css??

Verwijderd schreef op dinsdag 14 juli 2009 @ 14:38:
Hoe moet ik dat doen in js?? Ik ben niet goed met js

Verwijderd schreef op dinsdag 14 juli 2009 @ 14:34:
Hoe moet ik dan:
...
Daaromheen weergeven???

Niet. Mijn voorbeeld gebruikt een Unordered list; jij gebruikt klaarblijkelijk DIV's. Welke beter is ga ik nu niet over beginnen; laten we het er op houden dat beiden kan maar de één (vaak) boven de ander te verkiezen is. Een handige term, niet direct gerelateerd aan menu's maar in het algemeen van belang voor je, is Semantisch(e) HTML. Hoe dan ook, het moet er niet "om heen"

Als je niet weet hoe je dit zou moeten implementeren dan wil ik je vriendelijk verzoeken een tutorial HTML (en evt. PHP/JS) door te nemen want dit is gewoon basiskennis die je toch écht onder de knie zult moeten hebben wil je zelf tot een oplossing komen (en wij gaan 't hier niet voorkauwen):

Give a man a fish and feed him for a day. Teach a man how to fish and feed him for a lifetime.

En omdat we geen afhaalchinees voor kant-en-klare oplossingen zijn noch mensen aan 't handje tot een resultaat leiden sluit ik dit topic. Je bent van harte welkom een nieuw topic te openen wanneer je ergens tegen aan loopt als je daadwerkelijk (in een serieuze poging) aan 't implementeren bent maar je kunt dus niet van ons verwachten dat we het nu stap-voor-stap gaan uitleggen.

[ Voor 31% gewijzigd door RobIII op 14-07-2009 14:44 ]