CODEWITHSUNDEEP
htmlcss
ruby
ruby

Reputation: 23

Highlight the current page in the menu bar

How can I change the menu color when the page is selected?

Example:

home faq contact_us

I want to show which page is selected in the menu bar. I'm using CSS but not sure how to go about this.

My CSS code:

.menu { 
    float: left;
    margin: 0px 0 0 0;
     width: 1000px;
     } 
    .menu li {  
     border-left: 1px solid #fff;
     float: left;
     line-height: 1em;
     text-align: center;} .menu li a {  color: #fff;
     display: block;
     font: 17px Arial, Helvetica, sans-serif;
     padding: 0px 31px;     
     line-height:47px;
     text-decoration: none;
      } 
   .menu li a span {display:block; padding:0px 15px;} 
   .menu li a:hover, .menu  .active a{color:#fff;
    background:#ed1f26 url(images/menuleft.jpg) left top no-repeat;
    width:auto;  
   } 
    .menu li a:hover span, .menu .active a span
   {background: url(images/menuright.jpg) right top no-repeat;
    padding:0px 14px; 
    border:1px solid #b3c302;
  }

Upvotes: 1

Views: 1458

Answers (1)

GStubbenhagen
GStubbenhagen

Reputation: 182

Well, if you're writing the menu to each page (as seems to be the case from your comments) there's nothing stopping you from changing the background colour for the specific <li> related to that page.

Example below showing white background for current page (Home) or default colour for non-active pages.

<li style="background-color:rgb(255,255,255);">Home</li>
<li>FAQ</li>
<li>Contact Us</li>

Alternatively you could use some script and create tabs like I have done in this fiddle: http://jsfiddle.net/gstubbenhagen/zAbmA/

I would only recommend the tabs if you don't have too much content on each page as you don't want to make 1 very large page which takes forever to load on slower connections.

NOTE: If using the tabs option the example provided uses a JQuery plugin, make sure you add the same tools if you are not going to re-code.

Upvotes: 2

Related Questions