Code Snippet: vertical fly out menu example code using css

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

<< < (2/2)

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:
wow.. thats very good.

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

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: --- <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>
--- End code ---

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: ---<style type="text/css" media="all">
@import url(<?php echo TEMPLATE_DIR; ?>/css/f_h.css);
</style>



--- End code ---

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: ---#topnav .expandRight ul {
right: 0;
left: auto;
}

--- End code ---

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]

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: ---<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]  »</a>}]'); ?></div>
--- End code ---

HTML for menu without arrows:

--- Code: ---<div id="menu"><?php show_menu2(0,SM2_ROOT,SM2_ALL,SM2_ALL); ?></div>
--- End code ---

CSS:

--- Code: ---/***** 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;}
--- End code ---

---------------------------------------------------
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: ---<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]  »</a>}]'); ?></div>

--- End code ---

CSS:

--- Code: ---/***** 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;}
--- End code ---

[gelöscht durch Administrator]

Navigation

[0] Message Index

[*] Previous page

Go to full version