Customise CSS Menus with multiple backgroundimages?

[rhys]

Hello

I've got a menu, done in html/js where all top level items are colour coded using a background image here http://www.wdbuild.com/kaetest/layout2_curves.htm . I'd like to use the css horiz menu, but is whilst I can put a background image behind the whole menu, is there any way that I can give each top-level item a different background image, or a different left border.

Using my firefox dev tools, all top level items are the same class, therefore I can't address them individually, BUT, the tag recognises them as all being different and gives them a number (1-6 in my case). Any way of leveraging that fact to get multiple background images.

I could just use my own menu, but am keen not to have to manually change the menus every time the clients add or delete a page?

any ideas?

[chris.nobel]

I wanted to do something similar, manipulating each menu item's background color rather than its image.
The key to it, was to get the system to give each menu-item a separate css class, and then to define the properties for the background-color for each of these classes in your stylesheet. You can of course set a background image in the stylesheet, rather than a background-color.
Here's how to do it (see also this string where I found the solution: http://forum.cmsmadesimple.org/index.php/topic,8584.0.html

1) create a new menu template in your menu manager
2) in this template, change all class statements to:

Code: Select all

<li class="a{$node->id}">

. You can choose any text in stead of the 'a', so you can trace back easily (see next step). 
3) this outputs a separate class (like a52, a57, etc) for each of your menu-items. It seems these numbers are rather general. Once you've done this, apply the template, refresh your page, and select 'view source' on your browser. You'll find the exact numbers there (so choosing something unique in sterad of 'a' will make this easier).
4) in your stylesheet, define the lay-out for each of the classes that are generated. And you're done.

[Dr.CSS]

That is good if you are going to keep the pages in that order, no matter which way you do it if someone changes page order or name, using {$node->alias} give you the page alias for styling, you will have to keep track and change it...

Another tutorial...

http://multiintech.com/index.php/image_ ... imap1.html