Menu actief maken

[Pitfire]

Ik heb een menuutje op mijn site, code hiervoor is:

<div class="topnav" id="nav"> 
    <ul>
      <li><a href="Eerste.html" title="Home">Home</a></li>
      <li><a href="Tweede.html" title="Tweede">Tweede</a></li>
      <li><a href="Derde.html" title="Derde">Derde</a></li>
      <li><a href="Vierde.html" title="Vierde">Vierde</a></li>
      <li><a href="vijfde.html" title="Vijfde">Vijfde</a></li>
    </ul>
  </div>

Nu wil ik de eerste link actief maken, moet dit gewoon in .html bestand of in mijn .css? Hoe doe ik dit?

Alvast Bedankt

 

[fritzi]

Wat bedoel je precies met actief maken?

 

[Pitfire]

Ik wou dat de grijze balk waar het menu op staat, dat die laat zien op welke pagina je bent. Door middel van het vakje #697D55 (groen) te maken

Hoe doe ik dit

Dit is mijn menu in .css bestand. misschien ook wel handig:thumb:

#nav ul li{
display:inline;
list-style:none;
}

#nav ul li a{
margin: 0 0 0 0;
padding: .25em 2em .3em 2em;
background:#ffffff url(images/topnav_bg_grey.gif);
color: #000000;
text-decoration:none;
float: left;
border-right:1px solid #cccccc;
}

#nav ul li a:hover{
background:#9EB874 url(images/topnav_bg_green.gif);
color: #ffffff;
text-decoration:none;
border-right:1px solid #cccccc;
}

 

[fritzi]

Hoe zit jouw website in elkaar? Wordt het menu gegenereerd (door een CMS) of is het een 'gewone' html site? Zit het menu in een frame, of staat het op elke pagina?

 

[Pitfire]

Een Html pagina met op elke pagina hetzelfde menutje

 

[fritzi]

Je zou dit kunnen toevoegen aan je stylesheet:

#nav ul li a:link.active {
background:#9EB874 url(images/topnav_bg_green.gif);
color: #ffffff;
text-decoration:none;
border-right:1px solid #cccccc;
}

en zo het menu:

<div class="topnav" id="nav">
<ul>
<li><a href="Eerste.html" title="Home" class="active">Home</a></li>
<li><a href="Tweede.html" title="Tweede">Tweede</a></li>
<li><a href="Derde.html" title="Derde">Derde</a></li>
<li><a href="Vierde.html" title="Vierde">Vierde</a></li>
<li><a href="vijfde.html" title="Vijfde">Vijfde</a></li>
</ul>
</div>

Als je de class="active" per pagina bij de juiste link zet zou het vervolgens moeten werken.

 

[Pitfire]

Werkt! Bedankt!

 

[hades]

Zet je vraag even op de status 'Opgelost'. :thumb:

 

[Pitfire]

owja vergeten