[SOLVED] Building a menu with images

[zounars]

Hello all,

I have to code a design (PSD) made by another person.

I'm looking for advice on the best way to do it.

My problem come from the design. As you can see on the attach files, the "home" tab have one rounded corner.

The solution I found was using Advanced_CSS_Menu_Styling found on the wiki http://wiki.cmsmadesimple.org/index.php ... nu_Styling

But, i can't get this menu working well (define active menu with rounded corner and show submenu)

Dr CSS said there is a best way to achieve this menu http://forum.cmsmadesimple.org/index.ph ... #msg207455.

If you can give me an advice, it would help me.

Thanks for your help.





CMS Version 1.6.7
MenuManager 1.6.2
PHP 5.2.9
MySQL 5.1.30

Thanks in advance

Arsène

PS: Because english is not my native language, please excuse my mistakes.

[opawaldburger]

I don't exactly know what problem you have. But if I'm right you don't know how to make a mouseover-effect.
Do you have expirience using CSS?

If you don't, search the web for "hover". There will be plenty of instructions what it means an how to use it.
If you have expirience and simply don't know the best way of how to realise a dropdown menu I would recommend a very good method the author of cssplay.co.uk posted. It's a menu which works in EVERY browser (yes, IE too), only uses css AND validates. Have a look at http://www.cssplay.co.uk/menus/dd_valid.html. Since you use images in your menu you either apply a seperate id for every menu-point and set the according background-image or you will have to use a bit of Javascript which swaps the images for you when hovering.
You choice

Greets,
Opa

[Dr.CSS]

Copy the cssmenu.tpl add {$node->alias} to the class of every instance of li...

In the css add li.home a and the appropriate calls to it so it uses the images you want, then for the rest of the li a you can use a default image since it doesn't need the rounded one, you will need to use the horiz menu css as it is what that menu template uses, it should have plenty of comments to help you figure out what is what...

I have looked at that menu form cssPlay and never really liked it as it has way too much extra code for my taste and most everyone has JS enabled in IE6 browser, the cssmenu we use uses just a little bit of code to make these menus work in IE6 otherwise all other browsers understand how to do li:hover...

[opawaldburger]

Well, I guess that's a matter of taste . Since I don't really like the MenuManager and keep editing my menu manually I searched for an option which comes in handy. I prefer having a little bit more CSS than using Javascript, so the CSSPlay option is quite appropriate.

Greets

[zounars]

Thanks you both for your answers.
It was not a matter of css.
Using {$node->alias} solved my issue.

Arsene