html - nav menu highlighted the active page? -
i have 3 selection in nav menu. portfolio, about, , contact. here markup of it.
html
<div id="nav"> <a class="homepage" href="/index/0-1">portfolio</a> <a class="aboutpage" href="/index/0-2">about</a> <a class="contactpage" href="/index/0-3">contact</a> </div>
css
#nav { text-align: center; text-decoration: none; margin-top: 20px; padding-top: 31px; } #nav { text-decoration: none; color: #ffffff; font-family: maven; border-bottom: #ffffff 2px solid; padding-bottom: 5px; font-size:20px; } #nav a:hover { text-decoration: none; color: #ff6464; border-bottom: #ff6464 2px solid; }
now here example of i'm wanting do:
on homepage (which portfolio), "portfolio" in nav menu stays color #ff6464 long on page. how go doing this?
create .selected
class , apply current page. have override color want.
html
<div id="nav"> <!-- add new class portfolio/whatever current page --> <a class="homepage selected" href="/index/0-1">portfolio</a> <a class="aboutpage" href="/index/0-2">about</a> <a class="contactpage" href="/index/0-3">contact</a> </div>
css
#nav {text-align:center; text-decoration:none; margin-top:20px; padding-top: 31px;} #nav {text-decoration:none; color:#ffffff; font-family:maven; border-bottom:#ffffff 2px solid; padding-bottom:5px; font-size:20px;} #nav a:hover {text-decoration:none; color: #ff6464; border-bottom: #ff6464 2px solid;} #nav a.selected {color: #ff6464;} /* <---- new style! */
Comments
Post a Comment