View Full Version : Sprite Navigation with drop down sub navigation

Nov 3rd, 2010, 05:26 PM
Can you help, im in need of an idea of how to solve an issue.

I want to put a drop down menu like this > http://img192.imageshack.us/img192/404/21791185.jpg

Here is my site at the moment > http://www.sparekeys.org.uk/

Really struggling to get my head around how to impliment a jquery drop down effectively into this.

Please help me :)

Thanking in advance.

Nov 3rd, 2010, 05:55 PM
Not sure this is anything to do with sprites...

First off you need to add the next level dropdown into your markup by nesting another ul within your #nav li. I'd recommend the next step to be getting the menu to display properly using css, because you need that right before the jQuery. Include in this the drop down (so people with javascript disabled can still access your dropdown). Then you can add some jQuery animation to the dropdown, assuming that's what you want to do.

Suckerfish (http://htmldog.com/articles/suckerfish/dropdowns/) is a good place to start for the dropdown.

Nov 3rd, 2010, 06:44 PM
Ideally I want it too look like this http://www.lwis.net/free-css-drop-down-menu/dropdown.ultimate.horizontal.html

As the end result.

Il take a look at the link and see how I get on.

Nov 3rd, 2010, 08:27 PM
In the link you rpovided, all the coe you would need is there in the source. I can't see any JQuery aspect in it. It's the same if I have JS disabled, presumably, because it is a css drop-down menu.



Nov 4th, 2010, 11:25 AM
Im still struggling on how to achieve this idea with sprites?

this is what i achieved so far please see link above.

Nov 4th, 2010, 12:00 PM
Have you got the sprite set up? If so then it's just a question of applying the appropriate background, using the sprite, to your drop down links, which I see you now have working.

Nov 4th, 2010, 01:08 PM
Do you know of any sites that you could show me an example of this is action, as im still a bit hazy, i think i kind of get it.

show the image then the image hidden underneath on hover show the rest of that part of the sprite that i want to show.

Nov 4th, 2010, 01:10 PM
This (http://www.alistapart.com/articles/sprites2/) might be the sort of thing you're after.

Nov 4th, 2010, 03:08 PM
The link you have shown me, is what I have already achieved. :)

this is my sprite http://sparekeys.org.uk/images/navigation.png

i want to display a drop down menu when i hover over the keys or locks part etc.

would i do this with a larger image with a transparent like the sprite i have shown above but with big drop downs on the image but hidden in the css until the keys hover is activated? If that makes any sense at all.


Nov 4th, 2010, 03:57 PM
I'm not clear what you're asking. Your sprite includes images for your top menu but not the dropdown. There's nothing to stop you adding images for your dropdown to this same sprite image, if that's what you're asking.

Then use the background position css settings to display the image you want. You can display a part of the image on :hover by using the :hover pseudo class. So:

#nav li a{background: transparent url(mysprite.png) no-repeat -100px 0}
#nav li a:hover{background-position: -100px -50px}

or whatever. You'll need to apply your image to each li rather than just the ul as now.

Still not sure I've answered your question.

Nov 4th, 2010, 04:38 PM
I'm not sure what im asking, im looking for a simple way to be able to have multi level sub navigation with the navigation i already have in place.

And i can't for the life of me seem to get my head around how to achieve this.

Its rather annoying, I feel stupid.

Nov 4th, 2010, 04:54 PM
Ok - first your dropdowns - you've got this in your html but only the text displays, no background or anything, except on :hover, and that's not the right image anyway.

You need to apply a different background to that dropdown a element. Something like:

#nav ul a{background:transparent url(mysprite.png) -100px 0px no-repeat}

is going to set your background on dropdown elements only (because of the #nav ul selector). So, sort out your background images for your dropdowns, both normal and with hover, and then amend your css to reflect that.