Devoth Design - Web design Edinburgh.

Shortcuts

Downloads

Download imagineMenu() plugin
ver 1.1 [js]

Download imagineMenu() plugin
ver 1.1 + example pack [zip]

Previous versions

Ads by Google

imagineMenu() usage examples

imagineMenu is a jQuery plugin that lets you imagine all your *image menu* problems far away!

Few words about imagineMenu():

  • Makes creating image based menus a snap,
  • 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 class="sampleNav">
  <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 class="sampleNav">
  <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>

Image used for background

All items have equal widths.

Menu Bg Sprite

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 () {
  $('.sampleNav').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).

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 () {
  $('.sampleNav').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 () {
  $('.sampleNav').imagineMenu({image: 'img/menu.gif', link_widths: [105, 75, 120, 100], selected: 'home'});
});

Live example


That's it!

If you are interested how imagineMenu() works on a normal page - check Pizzeria Soprano.

If you missed download links on the top right hand side of the page. Here's a nice big button for you:

Download imagineMenu plugin + examples

If you have any suggestions or perhaps spotted an error in the above tutorial - drop me a line.

Author: Devoth. 26 January 2010
last update: 17 June 2010

Follow on: Facebook Twitter

Copyright 2005 - 2014 Devoth Design. Web design Edinburgh & Scotland.