Few words about imagineMenu():

  • Makes creating image based menus a snap (with all those fancy fonts and image effects - gradients, glows, shadows, etc).
  • Based on progressive enhancement, so the menu works even when JS is off, just in a bit raw (no-image) version,
  • degrades gracefully when images are off, thanks to tweaked Gilder/Levin Method for image replacement, which in original requires an additional span (imagineMenu adds that on the fly so your HTML remains sexy) and has some problems with enlarged fonts (imagineMenu fixes that by setting <a>'s overflow to hidden, so no font will stick out its toes at the bottom of menu when font is enlarged),
  • utilises image sprites to minimise number of http requests and deal with preloading of hovered menu items,
  • works with metadata plugin (not fully tested).

Jump to:

Default usage

HTML code

It will work with following code:

<ul id="firstNav">
  <li><a href="#home">Home</a></li>
  <li><a href="#blog">Blog</a></li>
  <li><a href="#gallery">Gallery</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

But the following is recommended (for a working preselected item):

<ul id="firstNav">
  <li class="home"><a href="#home">Home</a></li>
  <li class="blog"><a href="#blog">Blog</a></li>
  <li class="gallery"><a href="#gallery">Gallery</a></li>
  <li class="contact"><a href="#contact">Contact</a></li>
</ul>

CSS

A bit of CSS that will serve as a base for our menu and for those moments when JS won't be available:

<style type="text/css" media="screen">
ul.sampleNav { background:#000; list-style:none; margin:0; padding:0; height:30px; width:500px; float:left; display:inline; }
ul.sampleNav li { list-style-type:none; display:inline; }
ul.sampleNav li a { font-size:16px; color:#f6eccf; text-decoration:none; padding: 5px 10px 0px 10px; height:25px; float:left; display:inline; }
ul.sampleNav li a:hover { background:#cc3e20; }
</style>

JavaScript

<!-- include jQuery and imagineMenu plugin -->
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.imagineMenu-1.0.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
  $('#firstNav').imagineMenu({image: 'img/menu.gif', link_widths: 100});
});
</script>

Parameters for imagineMenu are as follows:

  • image - full path to background image for the menu containing all states (yup, just one image thanks to CSS sprites),
  • link_widths - integer containing width of menu item (for menus with all items of equal width, for other cases look below).

Image used for background

All items have equal widths.

Menu Bg Sprite

Live example

Before imagineMenu() is applied:


With imagineMenu() applied:


Menu with uneven item widths

Image for background

When our graphic designer supplied an image of uneven menu item widths:

Uneven Menu bg sprite

JavaScript

Simply pass an array to link_widths parameter:

$(function () {
  $('#secondNav').imagineMenu({image: 'img/menu.gif', link_widths: [105, 75, 120, 100] });
});

Live example


Preselected menu item

In most cases we could use a preselected menu item (to indicate which page we're currently on). It's as simple as passing one additional parameter to imagineMenu():

  • selected - just pass the class name of <li> which has to be marked as preselected.

JavaScript

$(function () {
  $('#secondNav').imagineMenu({image: 'img/menu.gif', link_widths: [ 105, 75, 120, 100], selected: 'home' });
});

Live example