CSS Menu Images

[shandog]

I would like to use images in a horizontal css drop down menu, and have searched for samples. While I find a lot on the topic, I cannot find a good code sample.
Here is what I am trying to achieve.

I would like to use the dynamic Menu Manager so when I add a new section it will automatically show on the site, but instead of a text rollover i would like it to be an image rollover that stayed highlighted when you were on that page.

When I add a new section, I will make sure to have an image, such as nav_about.jpg (navon_about.jpg) where "about" would be the name of the section I added. So, I would create a new set of buttons and name them accordingly and they would magically appear.

Any ideas?

Thanks

[Zoorlat]

Images for menus are normally a bad idea, it makes navigation harder for the regular non-images-using surfer (such as search-enigine-spiders).

But luckily you can get the best out of two worlds. Style it with background-image. 

The best way to achieve this I think would be to attach unique id-tags to each menuitem in the Menu Manager.
i.e:

Code: Select all

<li id="{$node->alias}">

If you also want the text to be hidden, uses your favorite metod. See for exemple how the site-title is replaced by an image in the default CMSMS-template:

Code: Select all

div#header h1 a {
   display: block; 
   text-indent: -999em;  /* this hides the text */
 }

You can do the same on your menu-style.

Then, by creating seperate backround-images for each id ("about" etc) you will have compleat control over each menu-item through your style sheets. Modern CSS also suports the hover-attribute which will give you your rollover effect. See http://css.maxdesign.com.au/listamatic2/horizontal04.htm for an example. You can use that example and simply add

Code: Select all

background-image: url(your_image.gif);

in the relevant places.

Hope you understand my not-so-structured help attempt. Good luck!

[neophron]

Are you looking for this:
http://themes.cmsmadesimple.org/Image_menu.html

neophron

[shandog]

Thanks, that link was the golden answer