login  Naam:   Wachtwoord: 
Registreer je!
 Forum

menu item active

Offline clonedonkey - 15/02/2009 13:43
Avatar van clonedonkeyNieuw lid Ik heb onderstaande css code. Wat hier gebeurt is dat elk menu item een plaatje is. Alle img's hebben een hoogte van 72px. Standaard wordt het menu 37px hoog. Precies de helft dus. Als iemand dan over een link gaat wordt de onderkant van de img getoont door -37px te doen bij A:hover. Alleen wat ik nu eigenlijk nog wil is dat als een menu item active is, er is dus op geklikt dat dan de onderkant van de afbeelding zichtbaar blijft. Nu is het zo dat alleen bij rollover de onderkant wordt getoond dus als je er op klikt zie je weer de bovenkant. Hoop dat het een beetje duidelijk is wat ik bedoel. Hieronder de css waarmee dit allemaal gebeurt en een link naar een voorbeeld van zo'n img.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #navigation {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	padding-left:15px;
  5. }
  6. #navigation li {
  7. 	list-style: none;
  8. 	height: 37px;
  9. 	float: left;
  10. 	position: relative;
  11. }
  12. #navigation li a {
  13. 	height: 37px;
  14. 	display: block;
  15. }
  16. a#news { width: 42px; height: 37px; }
  17. a#register { width: 54px; height: 37px; }
  18. a#destination { width: 71px; height: 37px; }
  19. a#travel { width: 43px; height: 37px; }
  20. a#agenda { width: 52px; height: 37px; }
  21. a#partners { width: 57px; height: 37px; }
  22. a#staff { width: 38px; height: 37px; }
  23. a#awards { width: 52px; height: 37px; }
  24. a#faq { width: 31px; height: 37px; }
  25. a#contact { width: 53px; height: 37px; }
  26. a#pictures { width: 58px; height: 37px; }
  27. a#news { background-image: url(../img/menu_02.jpg); }
  28. a#register { background-image: url(../img/menu_03.jpg); }
  29. a#destination { background-image: url(../img/menu_04.jpg); }
  30. a#travel { background-image: url(../img/menu_05.jpg); }
  31. a#agenda { background-image: url(../img/menu_06.jpg); }
  32. a#partners { background-image: url(../img/menu_07.jpg); }
  33. a#staff { background-image: url(../img/menu_08.jpg); }
  34. a#awards { background-image: url(../img/menu_09.jpg); }
  35. a#faq { background-image: url(../img/menu_10.jpg); }
  36. a#contact { background-image: url(../img/menu_11.jpg); }
  37. a#pictures { background-image: url(../img/menu_12.jpg); }
  38. a#news:hover,
  39. a#register:hover,
  40. a#destination:hover,
  41. a#travel:hover,
  42. a#agenda:hover,
  43. a#partners:hover,
  44. a#staff:hover,
  45. a#awards:hover,
  46. a#faq:hover,
  47. a#pictures:hover,
  48. a#contact:hover
  49. { background-position: 0 -37px; }


http://www.maxi-hosting.nl/dump/menu_04.jpg

8 antwoorden

Gesponsorde links
Offline Rik - 15/02/2009 13:48
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen
clonedonkey schreef:
Alle img's hebben een hoogte van 72px. Standaard wordt het menu 37px hoog. Precies de helft dus.
Uhm, 72 / 2 = 36?

Daarvoor kun je simpelweg a#...:active voor gebruiken.
Offline clonedonkey - 15/02/2009 14:00
Avatar van clonedonkey Nieuw lid hoogte klopt in werkelijkheid wel was foutje. Maar als ik onderstaande doe werkt het niet, weet niet wat ik dan fout doe ?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. a#contact:active
  2. { background-position: 0 -37px; }
Offline Rik - 15/02/2009 15:55
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Ik denk dat het probleem is dat de browser vindt dat de link niet meer actief is...

Je zou iets met javascript kunnen maken dat de stijl vast zet nadat er op die link is geklikt.
Offline clonedonkey - 15/02/2009 16:22
Avatar van clonedonkey Nieuw lid En hoe zou ik dat dan moeten doen ? Ben eigenlijk totaal niet bekend met javascript.
Offline Rik - 15/02/2009 16:34
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Javascript:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function () {
  2.     document.getElementById('contact').onclick = function() {
  3.         this.className += ' active';
  4.     }
  5. }
Dit voegt de class 'active' toe aan de contact link als er op wordt geklikt.

En dan in je css maak je van "a#contact:hover" nu "a#contact.hover"
Offline clonedonkey - 15/02/2009 19:57 (laatste wijziging 17/02/2009 21:11)
Avatar van clonedonkey Nieuw lid Werkt helaas niet. Op die manier werkt de rollover ook niet meer 
Offline Rik - 17/02/2009 21:13
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Weet je zeker dat je ook de css code hebt aangepast? Ik heb het lokaal getest en het werkte prima.  
Offline clonedonkey - 17/02/2009 22:07
Avatar van clonedonkey Nieuw lid heb a#news:hover veranderd naar a#news.hover

Weet niet wat ik dan fout kan doen
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.184s