Code Snippet: vertical fly out menu example code using css

[Argos]

Here's a very simple but elegant fly-out / slide-out menu but without a need for scripts or hacks. Just showmenu2 and simple CSS. However, it only works on non-IE6 browsers. IE6 makes a mess of it. Other IE and other browsers all work fine. Scoll below to see my solution for IE6 support.

I added some code to the showmenu call to show little arrows when a link has children. You can leave that out if you want (for example because it will also show the arrow on links with hidden children, and yo might not want that), so I'll give both examples.

The picture is from a site I'm working on. I had to blur some menu items as it is non-disclosure work.

HTML for menu with arrows:

Code Select Expand

<div id="menu"><?php show_menu2(0,SM2_ROOT,SM2_ALL,SM2_ALL,'[if(class!=menu-expand){[li][a][menu_title]</a>}][if(class==menu-expand){[li][a][menu_title]&nbsp;&nbsp;&raquo;</a>}]'); ?></div>

HTML for menu without arrows:

Code Select Expand

<div id="menu"><?php show_menu2(0,SM2_ROOT,SM2_ALL,SM2_ALL); ?></div>

CSS:

Code Select Expand

/***** Menu for all browsers, except Internet Explorer 6 *****/
#menu {width:190px;position:relative;padding:0;background:#73221e;}
#menu ul {width:190px;margin:0;padding:0;list-style:none;white-space:pre-wrap;text-align:left;padding:0;background:#73221e;}
#menu ul ul {position:absolute;left:-9999px;padding:0;background:#982a28;}
#menu ul ul ul {position:absolute;left:-9999px;padding:0;background:#bc3132;}
#menu li {margin:0;padding:0;list-style:none;display:inline;}
#menu a {display:block;font:normal 12px arial,sans-serif;line-height:15px;text-decoration:none;padding:6px 10px;color:#ffcc00;}
#menu li a:hover {background:#982a28;}
#menu li:hover > a {background:#982a28;}
#menu ul ul li:hover > a {background:#bc3132;}
#menu ul ul ul li:hover > a {background:#d25c5e;}
#menu ul li:hover > ul {left:100%;margin:-28px 0 0 0;}
#menu ul ul li:hover > ul {left:100%;margin:-27px 0 0 0;}
#menu a:hover ul,#menu a:hover a:hover ul,#menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;}

---------------------------------------------------
INFO FOR IE6 SUPPORT
If you want to make sure IE6 users have a decent menu as well, you have two options: use the technically more complex fly out menu from Woudloper: http://addons.websitebaker.org/pages/templates.php?id=147. Or use my menu as default, but show another, basic menu to IE6 users. If you want to do that, use this instead of the above. The menus have visual differences (colors and such), so you may want to work on that.

HTML:

Code Select Expand

<div id="menu"><?php show_menu2(0,SM2_ROOT,SM2_ALL,SM2_ALL,'[if(class!=menu-expand){[li][a][menu_title]</a>}][if(class==menu-expand){[li][a][menu_title]&nbsp;&nbsp;&raquo;</a>}]'); ?></div>
<!--[if IE 6]>
<style type="text/css">#menu{display:none;}</style>
<div id="menu_ie6"><?php show_menu2(0,SM2_ROOT,SM2_ALL,SM2_TRIM,'[if(class!=menu-expand){[li][a][menu_title]</a>}][if(class==menu-expand){[li][a][menu_title] &raquo;</a>}]'); ?></div>
<![endif]-->

CSS:

Code Select Expand

/***** Menu for all browsers, except Internet Explorer 6 *****/
#menu {width:190px;position:relative;padding:0;background:#73221e;}
#menu ul {width:190px;margin:0;padding:0;list-style:none;white-space:pre-wrap;text-align:left;padding:0;background:#73221e;}
#menu ul ul {position:absolute;left:-9999px;padding:0;background:#982a28;}
#menu ul ul ul {position:absolute;left:-9999px;padding:0;background:#bc3132;}
#menu li {margin:0;padding:0;list-style:none;display:inline;}
#menu a {display:block;font:normal 12px arial,sans-serif;line-height:15px;text-decoration:none;padding:6px 10px;color:#ffcc00;}
#menu li a:hover {background:#982a28;}
#menu li:hover > a {background:#982a28;}
#menu ul ul li:hover > a {background:#bc3132;}
#menu ul ul ul li:hover > a {background:#d25c5e;}
#menu ul li:hover > ul {left:100%;margin:-28px 0 0 0;}
#menu ul ul li:hover > ul {left:100%;margin:-27px 0 0 0;}
#menu a:hover ul,#menu a:hover a:hover ul,#menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;}

/***** Menu for Internet Explorer 6 *****/
#menu_ie6 ul {width:170px;margin:0;padding:0;list-style:none;}
#menu_ie6 li {width:200px;padding:0;display:inline;}
#menu_ie6 a {color:#ffcc00;text-decoration:none;display:block;padding:5px 5px 5px 10px;line-height:15px;}
#menu_ie6 ul li.menu-current a:link,
#menu_ie6 ul li.menu-current a:visited,
#menu_ie6 ul li.menu-parent a:link,
#menu_ie6 ul li.menu-parent a:visited {background:#b80c04;border-left:5px solid #ef0d0e;}
#menu_ie6 ul li a:link,
#menu_ie6 ul li a:visited {background:#700604;width:100%;border-left:5px solid #b80c04;}
#menu_ie6 ul li a:hover {background:#b80c04;border-left:5px solid #ef0d0e;}
#menu_ie6 ul li.menu-expand ul a:link,
#menu_ie6 ul li.menu-expand ul a:visited {background:#ac7b60;width:160px;border-left:5px solid #be9884;padding:5px 5px 5px 20px;color:#fff;}
#menu_ie6 ul li.menu-expand ul li.menu-current a:link,
#menu_ie6 ul li.menu-expand ul li.menu-current a:visited {background:#be9884;border-left:5px solid #cfb4a5;}
#menu_ie6 ul li.menu-expand ul li.menu-current a:hover {border-left:5px solid #cfb4a5;}
#menu_ie6 ul li.menu-expand ul li a {}
#menu_ie6 ul li.menu-expand ul li a:hover {background:#be9884;border-left:5px solid #d6bfb2;}

[gelöscht durch Administrator]

[swagmani]

Hi Andi,

The menu you suggest maybe a little advanced for the moment. So just now i coded the following.

How about for starters, try a similar approach to my original post but change a few settings to make the menu output work in horizontal style rather than vertical. i.e.

Code Select Expand

      <div id="topnav">   
                <?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="topnavList" class="adxm">'); ?>
            </div>

and then this code in the header: (apart from the main css file call, it provides backward compatability for older IE versions for the menu flyout. )

Code Select Expand


<style type="text/css" media="all">
   @import url(<?php echo TEMPLATE_DIR; ?>/css/f_h.css);
   </style>

   <!--[if lte IE 6]>
   <style type="text/css">
   @import url(<?php echo TEMPLATE_DIR; ?>/css/f_h_4IE.css);
   body { behavior:url("<?php echo TEMPLATE_DIR; ?>/css/ADxMenu.htc") }
   </style>
   <![endif]-->


Now please see the attachments for the 3 additional files to go into your templates folder 'css', files in zip are:

    * f_h.css
    * f_h_4IE.css
    * ADxMenu.htc

Too see a similar version of this suggested horizontal menu code working on another CMS of mine, review here http://www.murraylands.org.au/index.php

Please note: I trust this code for horizontal menu will work without too much coding, just some css changes for styling. (has not been tested but is based on original posts vertical flyout menu)

Oh, one other note to make: In the file, f_h.css , you may notice down the bottom of the file some classes similar to:

Code Select Expand


#topnav .expandRight ul {
   right: 0;
   left: auto;
}


These css values allow the 2nd level and beyond menu flyouts to justify right, i.e. foldout to the left.  For this to work show_men2 will need to allow another class inserted after first 'so many, say 5' menu items from left, only needed on the 1st level menu items li you would like to flyout left, e.g. <li class="expandRight">

Hope this helps. Please advise this thread if you were able to get working.

Matt K

[gelöscht durch Administrator]

[surf-andrea]

Hi this menu on cssplay.co.uk/menus/drop_definition4.html is very good but how should I take it in website baker?

My code is:

   <?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="pmenu">'); ?>

Would be very nice if you have any suggestions...


Andi

[bgg]

wow.. thats very good.

[Availor]

You can visit stu nicholl's website - he has great css only menus you can use with WebsiteBaker

http://www.cssplay.co.uk/menus/drop_definition4.html

Here's an example.

Some of his menus are complicated, but other's are very simple to integrate using show_menu2(); command.

[bgg]

ok. I got  a fix with another set of files downloaded from the following uRL, works on IE and FF.

http://dosimple.ch/articles/Menus-dynamiques/menuVertical.html

This is the tarball: http://dosimple.ch/articles/Menus-dynamiques/menus.tar.gz

check the menu working at: http://ww2.sahayogindia.org/

fyi

[swagmani]

Hi bgg,

I haven't worked on this flyout menu & IE6 parent/child hover bug since i posted original code, so sorry, no fix yet. Does anyone else have any suggestions for this bug, please read original post to understand what the bug is, cheers.

Regards, Matt

[bgg]

this is not working on on computer using IE6... any fix?

Code Select Expand

ww2.sahayogindia.org

On FF it works fine..

[doc]

Hello,

thanks for your contribution. Pretty sure people will love it.

Regards Christian

[swagmani]

Hi all,

I spent quite a few hours chasing around for a vertical flyout menu for my client and couldnt find much so i coded up collated the following.

Firstly creating the html output for the vertical menu items, (you will need to at least install the 'show_menu2-4.4.zip' module for the following to work).

Code Select Expand


      <div id="sidenav">   
                <?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="sidenavList" class="adxm">'); ?>
            </div>


and here is the css to be loaded to the header of the templates index.php file.

Code Select Expand


<style type="text/css" media="all">
   @import url(<?php echo TEMPLATE_DIR; ?>/css/f_v.css);
   </style>

   <!--[if lte IE 6]>
   <style type="text/css">
   @import url(<?php echo TEMPLATE_DIR; ?>/css/f_v_4IE.css);
   body { behavior:url("<?php echo TEMPLATE_DIR; ?>/css/ADxMenu.htc") }
   </style>
   <![endif]-->


Please see the attachment for the 3 additional files to go into your templates folder 'css', files in zip are:

• f_v.css
• f_v_4IE.css
• ADxMenu.htc

(Thanks to www.aplus.co.yu for initial css & ADxMenu.htc file  and additional css ideas from http://examples.codecharge.com/CCSExamplePack2/VerticalCSSMenu/VCSSMenu.php ).

Oh, here is the site where I first developed the above for, http://www.jmindustrialtools.com.au/

Happy fly out menus to you...

regards,

Matt

PS: my css is not perfect, css supplied may need tweaking; One IE6 bug i didnt yet fix: I did spend many hours trying to work out how to maintain the parent li background colour state when hovering over the child li but to no avail, the screen shots show example of this working in firefox but having minor ie6 bug. Any suggesting greatly appreciated.


[gelöscht durch Administrator]