Rollover menu

[metoo]

I need to do a simple rollover menu with images.  I've installed menu_2 in the latest version of WB but am not sure what to do next.  I would like to do it using CSS as much as possible. I found this somewhere which is a start, but it's not working. Here's what I have so far:

In index.php of the template:    <div id="<?php echo PAGE_TITLE; ?>">        <?php show_menu(2); ?>    </div>

In screen.css: 

.daycare {background-image: url(../../../images/daycare_button_over.gif);}
.daycare a {background-image: url(../../../images/daycare_button.gif);}

.training {background-image: url(../../../images/training_button_over.gif);}
.training a {background-image: url(../../../images/training_button.gif);}

.schedule {background-image: url(../../../images/schedule_button_over.gif);}
.schedule a {background-image: url(../../../images/schedule_button.gif);}

.boarding {background-image: url(../../../images/Boarding_Button_over.gif);}
.boarding a {background-image: url(../../../images/Boarding_Button.gif);}

.aboutus{background-image: url(../../../images/About_Button_over.gif);}
.aboutus a {background-image: url(../../../images/About_Button.gif);}

.contact {background-image: url(../../../images/contact_button_over.gif);}
.contact a {background-image: url(../../..//images/contact_button.gif);}

.photos {background-image: url(../../../images/photo_button2_over.gif);}
.photos a {background-image: url(../../../images/photo_button2.gif);}
 

ul.menu li a:hover {background: none;}

I was thinking the page title would become the class...am not a php or CSS pro, so am probably doing something wrong....any advice would be welcome!

[doc]

Hello,

you have to provide the right parameters to show_menu2 so your CSS definitions are used. Please read the documentation of show_menu2 included in the installation package or on the homepage of the developer.

Regards Christian

[metoo]

I did read it and it's as clear as mud. There is nothing that appears to be for image rollovers....I do not understand how menu-current and menu-expand can be used with different image classes to obtain a variety of buttons at the same level. 

[kweitzel]

You can pass the css class to the menu call and with that pass the page_title (or anything else of the variables and constants within WB) into the class. With that than you can realise the anted behaviour.

But a little suggestion of myself: Have a go at it first of all with the default showmenu ... this possibility exists there as well, but a bit more simple.

cheers

Klaus

[BerndJM]

Hi,

1. your call o show_menu2(); is not correct

Code: [Select]

<?php show_menu(2); ?>
2. with the naked call it provides standard values for the different parameters, with this values it's not possible to make this hover thing
You have to provide your own parameters to $aItemOpen and give there the classes that reflect the classes you have in your CSS

3. it's not clear for me what you want to achieve with your CSS:
an element with the class x has background-image - an <a> tag in this element has another background-image and at the only position you write dedicatet a difinition for :hover

Code: [Select]

ul.menu li a:hover {background: none;}
you want no background-image
shouldn't it not look like

Code: [Select]

.daycare a {background-image: url(../../../images/daycare_button.gif);}
.daycare a:hover {background-image: url(../../../images/daycare_button_over.gif);}


Regards Bernd

[metoo]

Thank you - I DO want a background image - a different rollover background image for each menu item.  That is exactly my question - how do I achieve this in index.php?  I'm not sure how to call the CSS for this.  I have been able to get a unique static background for each item, but not the rollover.  I do not know how to make the code for a rollover in index.php.