Using CSS Menu Sprite with Multi-Level Menu?

[furio]

Hello!

I was just wondering if anyone has managed to implement the Multi-Level Menu plugin with a CSS menu sprite.

In other words, I have already created a menu using a CSS sprite and would like to maintain the design and functionality. But I would just like to add the drop-down feature this plugin offers to my existing menu.

I searched through the posts but haven’t really found anything dealing with sprites. Can someone either provide some advice or point me to a possible solution?

Thanks!

P.S. Not that I think this would help but I’ve attached a copy of my sprite just in case.

[imported_Ryan]

I’m guessing by ‘sprite’ you mean ‘graphical buttons’.

Here is an example of a menu with fully customised graphical buttons which I created for one of our premium support members … http://capefearriverwood.com/

[furio]

Hi Ryan,

Thanks for the reply. A ‘sprite’ is somewhat similar to graphical buttons but instead of using individual graphics for each button, you use one image that contains all buttons as well as all of its ‘states’ (i.e. hover, active, etc.). The trend seems to be that they are replacing using individual images for buttons as they are more ‘efficient’ for loading time.

Anyway, I won’t bore you with all the details. You can find out more here: http://www.smashingmagazine.com/2009/04 … tutorials/

I’m going to look into the example you sent me as I’m sure there are some similarities as to how to use the drop-down menu with graphical buttons as well as with sprites. If you have any more suggestions though, I would still be interested.

Thanks again!

[furio]

Just to help clarify what a sprite looks like, take a look at the image I attached with my first post. You’ll notice that the one image includes the whole menu as well as the "up" state, the "down" state (or "hover" state), and the "active" state (when a user is on the page of the given menu item).

Hope it helps.

[imported_Ryan]

Hi,
Yes I understand what you mean, I’ve just never heard the term sprite used to describe that.

The http://capefearriverwood.com/ uses that approach, albeit I intentionally separated out the main background image from the hover images. The exact same principle can be used for ‘sprites’ though, you just need to use background positioning to place them into position.

[Author]

Posts