Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    50
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Good flyout menu with Prototype?

    Hi guys,

    I've spent nearly 3 hours looking for a free stable and crossbrowser vertical fly-out menu with unlimited sublevels.
    It would be best if it could be based on prototype.js which I already use on the site.
    Also, the categories should be ordered with nested divs instead of a javascript array.

    Any good recommendation?

    Thanks for the help!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Create a basic menu with html and CSS and then try to enhance the look and feel by adding some javascript effects(without losing the basic behaviour)
    See http://www.htmldog.com/articles/suckerfish/dropdowns/ to get the basics
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    50
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you.

    But unfortunately, for this one to work, you have to know in advance the number of levels. I need a menu that can have any number of levels because it is built from a database of products categories.

    So, it would be better for me to find a system that rely more on Javascript than CSS.
    CSS should be used only for the appearance of every menu item.

    Thanks again!

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    look up scriptaculous. it's a control\display library built on top of prototype. it has a TON of toys in it.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by sleidia View Post
    Thank you.

    But unfortunately, for this one to work, you have to know in advance the number of levels. I need a menu that can have any number of levels because it is built from a database of products categories.

    So, it would be better for me to find a system that rely more on Javascript than CSS.
    CSS should be used only for the appearance of every menu item.

    Thanks again!
    I don't agree! We can dynamically create the html markup for a multi-level menu from the values obtained from the DB, and this would be a nested unordered list(of uls and lis). And the suckerfish CSS will automatically handle any level of items, if we properly write the required rules.
    Say, this example have 4 levels by default and the main behaviour of this menu is handled by
    Code:
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left:-999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left:auto;
    }
    .
    Now, if we have one more level, all that we need to add is
    Code:
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul,#nav li.sfhover ul ul ul ul {
    left:-999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul,#nav li li li li.sfhover ul {
    left:auto;
    }
    A CSS based based menu ensures a higher level of accessibility, rather than a javascript based one, as people won't see any mouseover effects, if there is no javascript support.
    And as a final note, it's hard for normal users to follow a menu beyond a level of 4.
    Last edited by abduraooft; 10-03-2008 at 02:12 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •