Highlight Selected Page: Jquery + CSS

While working on my latest side project, I realized that I’ve never highlighted the current page in the navigation menu of any site I’ve worked on. While it doesn’t initially sound like it would be an issue, it’s a tad more involved than it sounds. I read up on a few different methods, but ended up creating my own. It’s only a few lines of code, and although it requires adding an ID and class to each page in navigation, it does the trick. It’s a similar solution to one of the popular ways of doing this, but without as much convoluted CSS.

First, the HTML. Since I’m working in a framework that declares the body tag for each page statically, I added a unique div ID to each of my main pages to identify it, and then gave each div the same class. Then assigned the same ID to the navigation links that correspond to the pages.


<div id="home_page" class="current"></div>
<div id="about_page" class="current"></div>


<div id="nav">
   <ol>
      <a href="index" id="home_page"><li>home</li></a>
      <a href="about" id="about_page"><li>about</li></a>
   </ol>
</div>

Now that we’ve got the HTML, we need to set the styles for the selected page. For my project, I just wanted a simple grey background behind the selected page. I decided to make the selected style the exact same for the navigation hover.


.selected_nav, #nav a:hover {
background-color:#EEE;
border-radius:7px;
padding: 3px 0;
}

Finally, we just need to grab that ID on every page load, and tack on the styling class. I added this JQuery function to the default layout page so that it’s included in every page request.


$(document).ready(function() {

   $('#'+$('.current').attr('id')).addClass('selected_nav');

});

Good night, and good luck.