AutoSprites - A jQuery Menu Plugin
Update 1/22/2009 - This plugin now contains support for an active state. It is just as easy to use and all of the animation still works with it. Read below to see how it works. (This was originally posted 10/28/2009)
Download the Files (Zip) | View a Demo
We have written and released a jquery dropdown menu plugin as well as a CSS Sprites2 Plugin -- this post is along the same lines. Its purpose is to allow you to build an image-based menu with animated hover states as easily as possible and by using the most concise descriptions possible. To see the results on both a horizontal and vertical menu, check out the demo.
Setting up the jQuery Menu Plugin
The first component when doing something with sprites is a combined image that contains all menu states. For the menu above, this is the image below was used. (This was designed by Liaison Design Group, one of our Partners)
The image contains, the normal state, the hover state and the active state. The value to doing things this way is that it allows your site to load faster. Rather than downloading an image for each nav item its hover state and its active state, only a single image needs to be downloaded. This minimizes the overhead of many http requests.
The next thing to do, is set up the HTML for the nav bar:
Then we need to set up the CSS. There are a couple of things to note here. We are applying the background image to the containing element so that we don't need to respecify background positioning. This also makes the menu usable if javascript is disabled. Each element needs to have its size defined specifically as well.
#hnav { position: absolute; top: 0; left: 0; width: 615px; height: 72px; background: url('horiz_sprites.gif') no-repeat; }
#hnav li { position: absolute; left: 0; height: 72px; }
#hnav #hnavhome { width: 82px; left: 0px; }
#hnav #hnavlocal { width: 146px; left: 82px; }
#hnav #hnavhigher{ width: 162px; left: 228px; }
#hnav #hnavcomm { width: 143px; left: 390px; }
#hnav #hnavnews { width: 82px; left: 533px; }
#hnav li a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 72px; text-indent: -9999em; }
Notice how much less complicated the CSS is than what is typical with sprites. There is no need to define background positioning for each element and its hover state. The last piece you'll need to do is enable the autosprites plugin:
$(document).ready(function(){
$('#hnav').autosprites();
});
There are no required options. The plugin defaults to a horizontal menu and fading for the animation. It infers everything else from the CSS. If you would like to customize things, here are the options that are available:
settings = $.extend({
offset: '100%',
orientation: 'horizontal',
over: { opacity: 'show' },
overSpeed: 500,
out: { opacity: 'hide' },
outSpeed: 500,
activeState: false,
activeClass: 'active',
activeSprites: false
}, settings);
The only bit worth explaining is the active state. In the image above, I show three states. By default, you only need two, a normal state and a hover state. If you set 'activeState' to true, it will use the hover state by default. If you want to specify your own active state, simply set 'activeSprites' to true as well.
So that's it! You can specify the minimum amount of information about your menu and the sprites will be built automatically. Be sure to check out the demo and download the zip for your own projects. As always leave a comment if you have any complements, insults, suggestions or questions.
A Special Note on Compiling Javascript
The purpose of using sprites is to minimize HTTP requests. It would be foolish to use this plugin by including jQuery, the minimized plugin, and a setup script. Instead, it is best practice on a production site to bring all of your scripts together into one file, just as sprites bring your images into one file.
Related Posts
Comments
MaUSMC
Thanks Joel, great plug-in.
sarfaraz
woww...thnku sooo much i love u...really its so easy to configure and its looks amazing i tried with one of my work.
thnku so much.
regards,
sarf
Joel Sutherland NMC team member
MaUSMC,
I just ran into the same issue on a project I was working on. For a vertical menu be sure to specify the offset rather than relying on the default. This will fix it.
MaUSMC
The simple enabling of activeState and activeSprites to true did not seeme to work for my vertical menu.
I'll work on an insertion of mousedown() that should work for ancient browsers.
NewYorkCityZoo
Nice plug-in!
I'm having some troubles with it working in Chrome. On load the links are getting a hover state. After a mouse over they return to off state and then work as expected. Any ideas?
Joel Sutherland NMC team member
Mauricio,
I just update this post so that it now supports an active state. Let me know what you think.
wparena
thanks dear, I am working on a new template and wanna know how to use this tech. you have saved my time..once again thanks
Mohammed Alaa
Wowww nice handy effect :)
Hunter.Zhang
Thank you,A super-tiny tool.
Mauricio Cirelli
I liked this plugin.
I would like to have the third sprite set for the active state. It would be wonderful!
Joel Sutherland NMC team member
Guario,
Would you want it to use the hover state as the active state as well? Or should there be a third sprite set?
Guario Rodriguez
Great plugin. I have see other plugins that use CSS Sprites for Navigation and jQuery, but I have yet to see one that also has an active state. I would like to create a CSS Sprite based navigation that would have a cool hover effect but also have a way to add an active state. It could be to add a third state to the sprite or just use the hover state as the active state as well.
Would it be possible to have that functionality to this plugin? Does it already have it? Thanks.
POMPEY
Very useful!!!
Thanks a lot!
web design egypt
hello
thanks very much
Joel Sutherland NMC team member
Zigi,
Right now the best way to accomplish that would be through the CSS. Just use background-position to accomplish it on the active selector.
zigi
Hello,
great plug!
question: how do make an "active" state the same as the "hover" state.
Thx
Joel Sutherland NMC team member
Sanakan,
To add more effects when javascript is disabled, you just need to write css for the hover states as you normally would with sprites.
The purpose of this plugin is to add as much as possible with as little effort as possible. I believe that with the rise of webkit based mobile browsers it is now reasonable to treat javascript as a requirement for the web and progressively enhance with it.
Sanakan
If javascript is disabled,how can I let the Sprites work?(and then,when js is included ,more dynamic.)
I mean can I have the hover effect by css ,still being fully degradable for no javascript?
Thanks for your last CSS Sprites2 Plugin,it's also bravo!
There are differences between that one and this.The last plugin can still have hover effect even without javascript,
and the animation is like "folder", but the new is different.Dose it because the new one using the
added DIV's backgroundImage attribute?
jQuery('<div> </div>').css({
backgroundImage: backgroundImage
}).prependTo(this).animate({opacity: 'show'});
but why the last like "folder"?the default jQuery Effects?
vipin
Hey Thanks alot for this..
Keep more coming..
Joel Sutherland NMC team member
Guys,
Thanks for the feedback. I have updated the demo, zip and jquery plugins page with your suggestions. It does work much better!
Sandro
I agree with Paul, and i don't think it should be an option, because i don't believe anyone would want to have a menu that "flicks" many times, after you pass the mouse rapidly and repeatidly over a menu item. Try it... and u will see what we mean. (and this implies more lines of code)
If u do what we are suggesting you still have multiple fades but in differents menu items. (I don't know if you understand me :P )
By the way, I loved you're earlier sprite plugin, i use it a lot. I was waiting for this new css improvement, because i was thinking of building a plugin to correct this, but you antecipated me.
Good JOB. Keep it coming. ;)
Abdulhakim Haliru
this is a cool plugin but it will be cooler if you give the '.psd' files along for modification by designer/developer to suit his taste and project theme.
Thanks for the plugin anyways, will sure use it if need be.
Paul van Steenoven
In my profession, its been a couple of times that the queued animation effect has been reported as a bug. In my opinion i would use stop() as default or you can wait what other users think.
Greetings,
Paul
Joel Sutherland NMC team member
Paul,
I will probably make that an option. I like the look of the multiple fades in some cases. Which do you think should be default?
Paul van Steenoven
Thanks for the cool plugin,
I would recommend using a stop() before the animate() to prevent queueing the animation when you mouseover fast a couple of times.
[code]
$(this).find('div').stop(false, true).animate(settings.over, settings.overSpeed);
[/code]
and
[code]
$(this).find('div').stop(false, true).animate(settings.out, settings.outSpeed);
[/code]
Leave a comment