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.
| Permalink
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]
| Permalink
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?
| Permalink
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
| Permalink
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.
| Permalink
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. ;)
| Permalink
Guys,
Thanks for the feedback. I have updated the demo, zip and jquery plugins page with your suggestions. It does work much better!
| Permalink
Hey Thanks alot for this..
Keep more coming..
| Permalink
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?
| Permalink
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.
| Permalink
Hello,
great plug!
question: how do make an "active" state the same as the "hover" state.
Thx
| Permalink
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.
| Permalink
hello
thanks very much
| Permalink
Very useful!!!
Thanks a lot!
| Permalink
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.
| Permalink
Guario,
Would you want it to use the hover state as the active state as well? Or should there be a third sprite set?
| Permalink
I liked this plugin.
I would like to have the third sprite set for the active state. It would be wonderful!
| Permalink
Thank you,A super-tiny tool.
| Permalink
Wowww nice handy effect :)
| Permalink
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
| Permalink
Mauricio,
I just update this post so that it now supports an active state. Let me know what you think.
| Permalink
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?
| Permalink
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.
| Permalink
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.
| Permalink
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
| Permalink
Thanks Joel, great plug-in.
| Permalink
Hello, what files do you have to edit in order to have an ACTIVE state for the vertical menu?? I have been trying to get that to work for hours... Can you update your files with a vertical menu Active state?
| Permalink
Jeff,
The offset property is required with the active state.
| Permalink
Do I just update the setup.js for that?
| Permalink
Got it... thanks! Awesome plug-in.
| Permalink
Hi,
I am developing my new website project now http://www.mybestrouter.com. I used this plug in and its work nicely. But when I am integrating it now with wordpress. It doesn't work.
Any thought? How to use this with wordpress?
Thanks so much anyway to this great plug in :)
| Permalink
I have only one issue with this great script. How can i disable the animation in the active state ? Because my active state is with a different background and when it's active i don't want to enable the animation for that button.
Any ideas ? Best regards,
| Permalink
I can't seem to modify the vertical script to support active state. I want to add an active image to the sprite image, but can't get it to work. Any suggestions to make the vertical version function as the horizontal? Any reason why the active state function was left out of the vertical?
Thanks
| Permalink
The offset setting is required for the active state. That should fix your issue.
| Permalink
my setup looks like this:
$('#vnav').autosprites({
orientation: 'vertical',
offset: '60px',
activeState: true,
activeSprites: true
});
however, my bkg img is not showing up. seems something is off. all i did is add my active state to the sprite and adjusted width and height.
http://bluemarbledesignllc.com/test2/. My vertical menu should be below your horz example, but no images. Thanks for any help!
| Permalink
| Permalink