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:
- 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 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.
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 () {
$('#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' });
});