Displaying menu with mouseover and fixed height for sub-menu

Two level, smoothly expanding, search engine friendly accordion menu.
Post Reply
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Displaying menu with mouseover and fixed height for sub-menu

Post by norman »

It is possible to display the menu with a mouseover used to open the sub-menus. This will also allow you to click all the menu items to go to the appropriate page. See http://www.drillpine.biz/v9accordion_menu_mouseover for a demo.

Do this as follows:

In Settings / Site Options / Accordion Menu, start with everything at Use Parent (except MenuBackground and MenuWidth).
Set RevealType to mouseover.
OK out.

That's the mouseover effect working. However it may look better if you set a fixed height for the sub-menus.

To arrange for a fixed height to be reserved for the sub-menus, continue as follows:

In Settings / Site Options / Accordion Menu.
Set OneMustOpen to true.
OK out.

Edit file accordion-glossy.css.
We first set the sub-menu height. Look for the lines:

Code: Select all

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}
Amend to be:

Code: Select all

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
min-height: 200px;
}
Changing the 200 to the height you'd like reserved for the sub-menus. This should be big enough for your largest sub-menu to show.

Optional: The border below the sub-items can be removed if it looks better that way. Look for the lines:

Code: Select all

.glossymenu div.submenu ul li{
border-bottom: 1px solid <actinic:variable name="AM-MenuBackground" />;
}
Change to:

Code: Select all

.glossymenu div.submenu ul li{
}
That should be it.
Post Reply