Page 1 of 1

Menu met focus

Posted: Thu Oct 10, 2013 7:19 pm
by joostsoo
Ik probeer een menu te maken waarbij de activer keuze een andere kleur heeft dan de niet active pagina's
Ik krijg wel een kleur verandering met .hover maar ik heb met .focus of .active lukt het niet.
Hoe moet ik dit aanpakken?
hier is een stukje uit het stuylesheet

#headermenu a {
/* color: #5ea628; */
text-decoration:none;
padding-right: 0px;
padding-left: 30px;
font-weight: normal;
font-family: Lucida Sans, Verdana, Arial, Helvetia, sans-serif;
}

#headermenu a:link {text-decoration: none; color: #5ea628;} /* groen */
#headermenu a:visited {text-decoration: none; color: #5ea628;} /* groen */
#headermenu a:focus {text-decoration: none; color: #009ac0;} /* blauw */
#headermenu a:hover {text-decoration: none; color: #009ac0;} /* blauw */
#headermenu a:active {text-decoration: none; color: #009ac0;} /* blauw */


#headermenu {
text-align:left;
font-size: 12px;
height: 40px;
width: 1000px;
padding-top: 1px;
padding-right: 0px;
}

Iemand een idee?

Alvast bedankt, Joost

Re: Menu met focus

Posted: Fri Oct 11, 2013 11:05 am
by pasmaskas
Niet getest maar mischien helpt het?

http://www.richnetapps.com/automaticall ... t_page_in/

Re: Menu met focus

Posted: Fri Oct 11, 2013 12:22 pm
by staartmees
Een standaard cmsms menu gebruikt class="currentpage".
In je css wordt dat dan: #headermenu a:currentpage

Re: Menu met focus

Posted: Mon Oct 14, 2013 11:10 am
by Adheera
joostsoo wrote:

#headermenu a {
/* color: #5ea628; */
text-decoration:none;
padding-right: 0px;
padding-left: 30px;
font-weight: normal;
font-family: Lucida Sans, Verdana, Arial, Helvetia, sans-serif;
}

#headermenu a:link {text-decoration: none; color: #5ea628;} /* groen */
#headermenu a:visited {text-decoration: none; color: #5ea628;} /* groen */
#headermenu a:focus {text-decoration: none; color: #009ac0;} /* blauw */
#headermenu a:hover {text-decoration: none; color: #009ac0;} /* blauw */
#headermenu a:active {text-decoration: none; color: #009ac0;} /* blauw */


#headermenu {
text-align:left;
font-size: 12px;
height: 40px;
width: 1000px;
padding-top: 1px;
padding-right: 0px;
}
Even met Firefox, Firebug kijken wat de current page code is
Kan zijn class="current" of ook zijn class="menuactive" ofzo
Je kunt ze ook bij elkaar zetten

#headermenu a:link, #headermenu a:visited {
text-decoration: none;
color: #5ea628;
} /* groen */
#headermenu a:focus, #headermenu a:hover, #headermenu li.menuactive {
text-decoration: none;
color: #009ac0;
}

Nooit a:focus bij navigatie, kan niet op links
Da's voor formuliervelden
http://www.w3schools.com/cssref/sel_focus.asp