CODEWITHSUNDEEP
htmlcss
Zevoxa
Zevoxa

Reputation: 301

nav menu highlighted the active page?

I have three selection in my nav menu. Portfolio, About, and Contact. Here is the 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 a {
   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 is an example of what I'm wanting to do:

On homepage (which is portfolio), "portfolio" in the nav menu stays the color #ff6464 as long as your on that page. How would I go about doing this?

Upvotes: 1

Views: 152

Answers (2)

Tepken Vannkorn
Tepken Vannkorn

Reputation: 9713

I'm not sure why you assigned class to all pages here when there is no stylesheet applied for them here (I remove them here and pls ignore this if you have used them in other purposes). As ByteBlast and Jace has answered, you could assign a class for that active page. So your HTML could be:

<div id="nav">
   <a class="selected" href="/index/0-1">Portfolio</a>
   <a href="/index/0-2">About</a>
   <a href="/index/0-3">Contact</a>
</div>

Then your CSS would be (by removing unnecessary styles):

#nav {
   text-align: center; 
   margin-top: 20px; 
   padding-top: 31px;
}
#nav a {
   text-decoration: none; 
   color: #FFFFFF; 
   font-family: maven; 
   border-bottom: #FFFFFF 2px solid; 
   padding-bottom: 5px; 
   font-size:20px;
}
#nav a:hover {
   color: #ff6464; 
   border-bottom: #ff6464 2px solid;
}
#nav a.selected {
   color: #ff6464;
}

UPDATE:

In your Portfolio page:

<div id="nav">
   <a class="selected" href="/index/0-1">Portfolio</a>
   <a href="/index/0-2">About</a>
   <a href="/index/0-3">Contact</a>
</div>

In your About page

<div id="nav">
   <a href="/index/0-1">Portfolio</a>
   <a class="selected" href="/index/0-2">About</a>
   <a href="/index/0-3">Contact</a>
</div>

and in your Contact page

<div id="nav">
   <a href="/index/0-1">Portfolio</a>
   <a href="/index/0-2">About</a>
   <a class="selected" href="/index/0-3">Contact</a>
</div>

Upvotes: 0

Jace
Jace

Reputation: 3072

create a .selected class and apply it to the current page. Have it override the color into what you want.

HTML

<div id="nav">
 <!-- add a new class to portfolio/whatever the current page is -->
 <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 a {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! */

Upvotes: 2

Related Questions