Actief menuitem weergeven.

Status
Niet open voor verdere reacties.
A

AeroFury

Nieuwe gebruiker
Lid geworden
3 feb 2009
Berichten
2
Voor school moet ik een portfolio maken en daarin wil ik ervoor zorgen dat mijn rollover button ingedrukt blijft wanneer ik me op deze pagina bevind.

Anders gezegd: Wanneer ik op de pagina "Profiel" ben, wil ik dat de bijhorende menuknop profiel ingedrukt blijft, m.a.w dat mijn rollover image zichtbaar blijft i.p.v de standaard menuknop.

Ik heb 6 verschillende menu bottons, met elk hun aparte rollover image.

De html en css voor mijn navigatie ziet er zo uit:

html
Code: 
<div id="navigatie">
<ul>
<li><a href="index.htm" id="ProfielMenu"><span>Profiel</span></a></li>
<li><a href="traject.htm" id="TrajectMenu"><span>Traject</span></a></li>
<li><a href="showcase.htm" id="ShowcaseMenu"><span>Showcase</span></a></li>
<li><a href="links.htm" id="LinksMenu"><span>Links</span></a></li>
<li><a href="contact.htm" id="ContactMenu"><span>Contact</span></a></li>
<li><a href="sitemap.htm" id="SitemapMenu"><span>Sitemap</span></a></li>
</ul>
</div>

css (voor 1 knop)

Code: 
a#ProfielMenu 
{ 
background-image:url(Images/Profiel%20button.png);
height: 74px; 
width:153px; 
display:block; 
}

a#ProfielMenu span 
{ 
display:none; 
}

a#ProfielMenu:hover
{ 
background-image:url(Images/rollover%20profiel.png); 
}

Dus nu wil ik ervoor zorgen dat wanneer ik op de knop "Profiel" klik en ik mij op de pagina "index.htm" bevindt. De knop profiel weergegeven wordt als rollover image, dezelfde image die getoond wordt bij :hover.

Ik heb 6 verschillende buttons, dus ik kan niet 1 class maken voor de 6 buttons samen. Iedere button heeft een verschillende rollover image. Ik denk dat het daarom niet wil lukken.

Het zou echt super zijn, moest iemand me kunnen helpen..
Hoe zou ik dit moeten aanpakken?
 
Yes, daar gaat ie!
Je hebt nu 6 images + 6 rollover-images = 12 images. Die moeten allemaal apart door de browser van de bezoeker opgevraagd worden bij de server. Dat opvragen bij de server is in feite uploaden, en uploaden gaat veel trager dan downloaden. Als je die 12 images kunt vervangen door één image, hoeven er 11 download-verzoeken ("http-requests") minder gemaakt te worden. Dat scheelt tijd! En het zorgt ook voor minder geflits in Internet Explorer, als er een rollover plaatsvindt.
Maar wat moet je nu met één grote afbeelding beginnen? Die gaan we gesplitst vertonen, en daar hebben we css voor!
Maar nu de eigenlijke vraag. Hoe houdt de actuele pagina de ingedrukte staat van de knop? Ook dat kan eenvoudig met een handige css-truc. Maar eerst de nodige html-aanpassingen.
Je begint met elke pagina een eigen class-naam te geven, die toegevoegd wordt aan de body-tag. Dus voor de profiel-pagina:
HTML: 
<body class="profiel">
Voor de traject-pagina:
HTML: 
<body class="traject">
Enz.
Nu zet je in het menu een id met dezelfde naam bij elk menu-onderdeel.
HTML: 
<li><a href="index.htm" id="profiel"><span>Profiel</span></a></li>
<li><a href="traject.htm" id="traject"><span>Traject</span></a></li>
enz.
Nu gaan we in de css opdracht geven de hover-staat ook aan te zetten als je op een bepaalde pagina bent. Dat gaat als volgt (als je hover-delen op de rechterhelft van het gecombineerde plaatje zitten, en als elke knop 20px hoog is):
Code: 
[FONT="Courier New"][SIZE="2"].profiel #profiel { background-position: 100% 0; }
.traject #traject { background-position: 100% -20px;}
enz.[/SIZE][/FONT]
Dat betekent:
Alléén als de browser een id="profiel" tegenkomt die ergens in de html wordt voorafgegaan door een class="profiel", dan moet de knop van #profiel ingedrukt getoond worden.
En dat gebeurt natuurlijk alleen op de pagina waar je de class="profiel" in de body hebt staan, d.w.z. de profiel-pagina.
Bij alle andere pagina's staat ook wel de id="profiel" in het menu, maar die wordt niet voorafgegaan door een class="profiel" (want die hebben in de body-tag hun eigen class-naam gekregen). Dan blijft dus in al die andere pagina's de knop Profiel oningedrukt, en dat is precies wat we willen! :)
Voor de andere pagina's gebeurt het automatisch op dezelfde manier. Klaar! :D

Succes!
CSShunter
 
Bedankt voor de zeer uitgebreide uitleg! Ik had het ondertussen zelf al kunnen oplossen. Ik zal jouw methode nog eens helemaal doorlezen. Ik kan er maar uit leren. ^^


Kzat de hele tijd te klooien in mijn template terwijl op iedere pagina de navigatie er eigenlijk anders moet uitzien. Heb dan een nieuwe editable region aangemaakt en op iedere pagina het bijhorende menu-item een extra class gegeven en die aangesproken in mijn CSS.

Dus voor mijn profielpagina bijvoorbeeld (index.htm)

Code: 
 <div id="navigatie">
    <ul>
      <li><a id="ProfielMenu" class="ProfielSelected"><span>Profiel</span></a></li>
      <li><a href="traject.htm" id="TrajectMenu"><span>Traject</span></a></li>
      <li><a href="showcase.htm" id="ShowcaseMenu"><span>Showcase</span></a></li>
      <li><a href="links.htm" id="LinksMenu"><span>Links</span></a></li>
      <li><a href="contact.htm" id="ContactMenu"><span>Contact</span></a></li>
      <li><a href="sitemap.htm" id="SitemapMenu"><span>Sitemap</span></a></li>
    </ul>
  </div>

Code: 
#ProfielMenu.ProfielSelected
{
	background-image:url(Images/rollover%20profiel.png);
}

Voor de volgende pagina (traject.htm)

Code: 
 <div id="navigatie">
    <ul>
      <li><a href="index.htm" id="ProfielMenu"><span>Profiel</span></a></li>
      <li><a id="TrajectMenu" class="TrajectSelected"><span>Traject</span></a></li>
      <li><a href="showcase.htm" id="ShowcaseMenu"><span>Showcase</span></a></li>
      <li><a href="links.htm" id="LinksMenu"><span>Links</span></a></li>
      <li><a href="contact.htm" id="ContactMenu"><span>Contact</span></a></li>
      <li><a href="sitemap.htm" id="SitemapMenu"><span>Sitemap</span></a></li>
    </ul>
  </div>

Code: 
#TrajectMenu.TrajectSelected
{
	background-image:url(Images/rollover%20traject.png);
}

Maar als ik bijvoorbeeld #TrajectMenu .TrajectSelected deed ipv aan elkaar dan ging het niet, daarom dat ik zolang zitten prutsen heb. :p Je moet wel heel exact zijn met je namen.
Kheb ook de href weggehaald zodat je niet meer op de button kan klikken. Dus als je op de profielpagina bent, kan je niet meer op "Profiel" klikken, enz...
 
Laatst bewerkt:
Ja, zo kan het ook. Met css kan je vaak op tig manieren hetzelfde bereiken. :)
Met wat je hierboven aan code hebt staan, zou je het ook nog kunnen vereenvoudigen tot:
Code: 
[FONT="Courier New"][SIZE="2"]#ProfielMenu
{
	background-image:url(Images/rollover%20profiel.png);
}
#TrajectMenu
{
	background-image:url(Images/rollover%20traject.png);
}[/SIZE][/FONT]
enz.
Dan kan je de hele class="ProfielSelected" bij elke pagina weglaten.

Als je het eerste deel van m'n tips vergeet (het samenstellen + weer splitsen van de images), zou jouw code er met één menu als volgt uitzien:
Code: 
[FONT="Courier New"][SIZE="2"].ProfielMenu #ProfielMenu {
	background-image:url(Images/rollover%20profiel.png);
	cursor: default;
	}
.TrajectMenu #TrajectMenu {
	background-image:url(Images/rollover%20traject.png);
	cursor: default;
	}[/SIZE][/FONT]
enz. (hier wel de spatie ertussen!)
Met cursor: default; krijg je op een bepaalde pagina geen handje als je over de menu-link van diezelfde pagina heen gaat, maar een gewoon pijltje (alsof er niet geklikt kan worden). Dan hoef je per pagina ook niet die link weg te halen, en kan het menu overal hetzelfde blijven. Het menu gaat dan worden:
HTML: 
<div id="navigatie">
    <ul>
      <li><a id="ProfielMenu" href="index.htm"><span>Profiel</span></a></li>
      <li><a id="TrajectMenu" href="traject.htm"><span>Traject</span></a></li>
      <li><a id="ShowcaseMenu" href="showcase.htm"><span>Showcase</span></a></li>
      <li><a id="LinksMenu" href="links.htm"><span>Links</span></a></li>
      <li><a id="ContactMenu" href="contact.htm"><span>Contact</span></a></li>
      <li><a id="SitemapMenu" href="sitemap.htm"><span>Sitemap</span></a></li>
    </ul>
</div>
Tenslotte geef je per pagina de <body> de class-naam van die pagina mee. Voor de profiel-pagina dus:
HTML: 
<body class="ProfielMenu">
Voor de trajectmenu-pagina:
HTML: 
<body class="TrajectMenu">
enz.
Deze class komt steeds maar op die ene pagina voor, en triggert de css .ProfielMenu #ProfielMenu (voor de profiel-pagina; enz.), waardoor met hetzelfde menu die ene pagina toch de ingedrukte knop laat zien. :)

En tot slot nog de tip om in bestandsnamen geen spaties te gebruiken. Dat worden dan %20 tekens, en die leiden vaak tot vergissingen (ook browsers verslikken zich er soms in). Beter kan je een underscore _ of een gewoon streepje - in de bestandsnaam gebruiken: rollover_profiel.png of rollover-profiel.png.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan