Shortcuts
Downloads
Download imagineMenu() plugin
ver 1.1 [js]
Download imagineMenu() plugin
ver 1.1 + example pack [zip]
Previous versions
- Download imagineMenu() plugin ver 1.0 (js)
- Download imagineMenu() plugin ver 1.0 + standalone example pack (zip)
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:
- Example of default usage
- Example for menus with items of different width
- Example of preselected menu item
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.
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:
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.
Follow on: 
