Navigation Menu with current page disabled

In creating my new portfolio pages, I have relied on other people’s code. I’ve already mentioned the Photobox jQuery image gallery, which drives the slideshows on the new pages. From multiple sources, I figured out a better way of using CSS to create navigation menus than what I’ve been doing before. The core idea is that the link to the current page should show up in the navigation menu but should not be active. Typically, you’ll want to either pull it out visually, to flag the page you are on, or dull it it down, to indicate that it is not available to be clicked. Ideally, the cursor should not change to the active pointing finger over the inactive link.

I relied on multiple classes before, and had to do lots of markup editing. By adding some jQuery code to the CSS, you can get the menu working with minimal fuss.

CSS:

#navmenu a {
   color: #90c7fe;
   text-decoration: none;
}
#navmenu a:hover {
   text-decoration: underline;
   color: #fe596e;
}
#navmenu {
   color: #838390;
   padding-left: 1.5em;
   padding-top: 0.5em;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}
#navmenu a.current-page {
   color: #fedc7b;
   text-decoration: none;
   pointer-events: none;
   cursor: default;
}

JavaScript (jQuery)

$('a.current-page').click(function() { return false; });

The JavaScript should be included either on a page load or at the end of the page, just before the <body/> tag. To use the markup, just enter something like this:

<div id="navmenu"> 	
<a href="glitchez.html">Glitch Nation</a> | 
<a href="gifz.html">GIFs</a> | 
<a href="datascapez.html" class="current-page">Datascapes</a> | 
<a href="birdz.html">Ornithology Suite</a> | 
<a href="studiez.html">Field Studies</a> | 
<a href="treez.html">Tree Scrolls</a> | 
<a href="noiz.html">Blue Noise</a>		
</div>

The key to it all is shifting the “current-page” class to the navigation link for whatever page you are on. The CSS takes care of the appearance of the disabled link and the JavaScript disables the cursor response. The code may not work in IE (but what did you expect?). Of course, you’ll have to include jQuery, probably with something like this in the header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

0 Responses to “Navigation Menu with current page disabled”


  • No Comments

Leave a Reply

You must be logged in to post a comment.