Simple flyout menu [solved]

[renno]

Hi, is it possible to create a fly out menu by altering the default Navigation: Simple - Vertical css? I have been scrolling through various forums and apologise if the question has been answered before.

I basically want to display the child pages of a parent just to the right of the nav menu as the mouse hovers over menu item, obviously not the whole page just the link so a user is able to navigate to that page.

All I can see is:

div#menu_vert a:hover {
   background-color: #C3D4DF;
   background: url(images/button.jpg) no-repeat 0em center;   
}

which only changes the apperance of the button during mouseOver. Do I need to insert 'display: block;'?

Any help would be much appreciated...

Cheers,

Tom

[KO]

You should check the default template "CSSMenu Left + 1 Column". That should have everything including javascript for IE to do the trick.

br,K

[renno]

Hi, thanks for the advise... Do I need to change anything in the template at the navigation bit after having applied the the CSS stylesheet to it? i.e.

Code: Select all

<div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         {menu template='simple_navigation.tpl' collapse='1'}
      </div>

I've tried altering the 'simple navigation vertical' stylesheet but some of the background images stick after the mouse has rolled out, is that the internet explorer error you said above?

[KO]

it might be a lot of work to get "simple navigation vertical" to work like "flyout menu" but i'm sure it can done.

"CCSMenu Vertical" page template is made to work as flyout but it needs to be used in combination "cssmenu.tpl" menu template and right stylesheets. You should then alter stylesheet to look as you want. It also needs Javascript but not for IE bugs. IE has limitation of not able to do li:hover so some javascript needs to used to get that happen.

Check Default "CSSMenu vertical" template and see how it is built. Check also what style sheets are attached to that.

[renno]

Thanks very much, everything looks great.
Cheers again...