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

Code Snippet: vertical fly out menu example code using css

(1/2) > >>

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: ---      <div id="sidenav">   
                <?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, &#39;<ul id="sidenavList" class="adxm">&#39;); ?>
            </div>

--- End code ---

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

--- Code: ---<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]-->

--- End code ---

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]

doc:
Hello,

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

Regards Christian

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


--- Code: --- ww2.sahayogindia.org
--- End code ---

On FF it works fine..

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:
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 :)

Navigation

[0] Message Index

[#] Next page