Author Topic: Code Snippet: vertical fly out menu example code using css  (Read 17117 times)

Offline swagmani

  • Posts: 9
Code Snippet: vertical fly out menu example code using css
« on: February 12, 2008, 07:15:06 AM »
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:
Only registered users can see contents. Please click here to Register or Login.
and here is the css to be loaded to the header of the templates index.php file.
Code:
Only registered users can see contents. Please click here to Register or Login.
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]
« Last Edit: February 12, 2008, 07:36:30 AM by swagmani »

doc

  • Guest
Re: Code Snippet: vertical fly out menu example code using css
« Reply #1 on: February 12, 2008, 07:23:47 AM »
Hello,

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

Regards Christian

Offline bgg

  • Posts: 103
Re: Code Snippet: vertical fly out menu example code using css
« Reply #2 on: May 07, 2008, 08:52:13 AM »
this is not working on on computer using IE6... any fix?

Code:
Only registered users can see contents. Please click here to Register or Login.
On FF it works fine..


Offline swagmani

  • Posts: 9
Re: Code Snippet: vertical fly out menu example code using css
« Reply #3 on: May 08, 2008, 12:48:24 AM »
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

Offline bgg

  • Posts: 103
Re: Code Snippet: vertical fly out menu example code using css
« Reply #4 on: June 06, 2008, 06:52:26 PM »
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 :)

Offline Availor

  • Posts: 225
  • Gender: Male
  • Yup it's me
Re: Code Snippet: vertical fly out menu example code using css
« Reply #5 on: June 07, 2008, 10:12:37 PM »
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.

Offline bgg

  • Posts: 103
Re: Code Snippet: vertical fly out menu example code using css
« Reply #6 on: June 08, 2008, 06:59:24 AM »
wow.. thats very good.

Offline surf-andrea

  • Posts: 126
Re: Code Snippet: vertical fly out menu example code using css
« Reply #7 on: June 16, 2008, 05:06:05 PM »
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

Offline swagmani

  • Posts: 9
Re: Code Snippet: vertical fly out menu example code using css
« Reply #8 on: June 17, 2008, 01:00:23 AM »
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:
Only registered users can see contents. Please click here to Register or Login.
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:
Only registered users can see contents. Please click here to Register or Login.
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:
Only registered users can see contents. Please click here to Register or Login.
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]

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: Code Snippet: vertical fly out menu example code using css
« Reply #9 on: December 19, 2009, 10:31:19 PM »
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:
Only registered users can see contents. Please click here to Register or Login.
HTML for menu without arrows:
Code:
Only registered users can see contents. Please click here to Register or Login.
CSS:
Code:
Only registered users can see contents. Please click here to Register or Login.
---------------------------------------------------
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:
Only registered users can see contents. Please click here to Register or Login.
CSS:
Code:
Only registered users can see contents. Please click here to Register or Login.
[gelöscht durch Administrator]
« Last Edit: December 19, 2009, 11:18:59 PM by Argos »
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

 

postern-length