navigatie a selectors
Hier is mijn website: http://www.i4-it.be
als ik nu bijvoorbeeld op de homepagina ben zou ik willen dat navigatieknop 'home' actief blijft zoals de hoverafbeelding.
Weet iemand hoe ik dit moet doen?
Alvast bedankt!
CSS
/* Navigatie */
#nav {
margin-top:33px;
margin-left:5px;
width:444px;
height:32px;
float:left;
}
.home {
width:73px;
height:32px;
float:left;
}
.about {
width:80px;
height:32px;
float:left;
}
.services {
width:94px;
height:32px;
float:left;
}
.portfolio {
width:103px;
height:32px;
float:left;
}
.contact {
width:94px;
height:32px;
float:left;
}
HTML
<div id="nav">
<div class="home">
<a href="index.html" onmouseover="document.getElementById('home').src='img/home_hover.gif'" onmouseout="document.getElementById('home').src='img/home.gif'"><img src="img/home.gif" id="home" style="border:none;"></a>
</div>
<div class="about">
<a href="html/about.html" onmouseover="document.getElementById('about').src='img/about_hover.gif'" onmouseout="document.getElementById('about').src='img/about.gif'"><img src="img/about.gif" id="about" style="border:none;"></a>
</div>
<div class="services">
<a href="html/servweb.html" onmouseover="document.getElementById('services').src='img/services_hover.gif'" onmouseout="document.getElementById('services').src='img/services.gif'"><img src="img/services.gif" id="services" style="border:none;"></a>
</div>
<div class="portfolio">
<a href="html/portfolio.html" onmouseover="document.getElementById('portfolio').src='img/portfolio_hover.gif'" onmouseout="document.getElementById('portfolio').src='img/portfolio.gif'"><img src="img/portfolio.gif" id="portfolio" style="border:none;"></a>
</div>
<div class="contact">
<a href="html/contact.html" onmouseover="document.getElementById('contact').src='img/contact_hover.gif'" onmouseout="document.getElementById('contact').src='img/contact.gif'"><img src="img/contact.gif" id="contact" style="border:none;"></a>
</div>
</div>
Ricardo Verboom op 16/11/2011 11:46:39:
Je wilt dus dat de kleur blijft zoals hij was toen je erop klikte ?
als ik dus op de homepagina ben dat de knop blauw is
Overigens is je opbouw van het menu zo niet erg netjes. Sowieso zijn afbeeldingen niet het beste om mee te navigeren, vanwege SEO. Ook kan je beter een menu maken op basis van een lijst. Als je dan toch perse afbeeldingen wilt gebruiken (die hier niet nodig zijn) zou ik ook hier met achtergronden werken, de standaard tekst in de div (of in mijn geval in de li) zetten en met CSS text-indent verbergen.
Maar hoe geef je telkens een ander menu-item een class mee, als je - naar ik aanneem - het menu includeert en gebruik maakt van een extern stijlblad?
Gewijzigd op 19/11/2011 15:29:06 door Frank C