WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Rollover menu

(1/2) > >>

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: ---<?php show_menu(2); ?>
--- End code ---

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: ---ul.menu li a:hover {background: none;}
--- End code ---

you want no background-image :?
shouldn't it not look like

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

--- End code ---
???

Regards Bernd

Navigation

[0] Message Index

[#] Next page