Flex Level Drop Down Menu With jQuery

Flex Level Drop Down Menu is a jQuery plugin that lets you add a multi level drop down menu to any link on the page. You can use this plugin to create both horizontal or vertical menu bars, since drop down menu can appear below or to the right of the anchor element.

Structure wise Flex Level Drop Down Menu is simply defined as a regular nested UL on the page, making it very intuitive to set up. By default menu will appear beneath the anchor link, with no additional x or y offset. You can modify both of these aspects using configuration options.

Features

  • Lets you associate a multi level drop down menu to any link on the page, by inserting the custom attribute  “data-flexmenu” inside the link
  • Control whether the menu drops down or to the right of the anchor link, through the use of the custom attribute “data-dir”
  • Ability to fine tune the position of the drop down menu relative to the anchor link, by specifying a custom x and y offset using the attribute “data-offsets”
  • Each drop down menu is simply defined as a regular, hidden nested UL on the page
  • Main and sub menus repositions themselves when too close to the right or bottom edges of the browser window so they remain in view
  • Ability to customize the expand animation speed
  • Ability to specify the delay before each menu and its sub menus appear/ disappear when the mouse rolls over and out of them

Developed by Dynamic Drive; Flex Level Drop Down Menu is available for download for Free. You can find further information, demo & download on Dynamic Drive Website.

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More

SIMILAR/RELATED POSTS:

PREVIOUS POST:

NEXT POST:

Reader Comments

5 Responses to “Flex Level Drop Down Menu With jQuery”
  1. Good one..! really helpful.! Great share.!

  2. denbagus says:

    thank you .. this article help me for my work

  3. Peter Benson says:

    Thanks for the article, do u know if this supports jQuery UI?

  4. I love this navigation. Works great, looks great.. and it’s simple. I have one problem.. and I’m hoping that you can help.. it doesn’t pass XHTML validation. It’s complaining about the attribute ‘data-flexmenu’. I tried to add that to the dtd, but that introduced additional problems, any plans to remove the attribute and just use ‘data-flexmenu’ as a class value instead?

    Thanks!
    hanji

  5. David Wenk says:

    Hey Hanji, I am having exactly the same question. It’s not validating. I realized this when running HTML Tidy on the code and having it throw an error.

    I’m just about to have a look at this page, which is linked off the main Flex Level Drop Down Menu page. It seems to use a cleaner method and I’m hoping that will solve the validation issue.

    http://www.dynamicdrive.com/dynamicindex1/flexdropdown_suppliment.htm

    (why can’t they spell supplement right?)

    DW

Leave Comment

 
 

Stay Updated, Subscribe to RSS Feed

 
 
 
 

Blogroll

 

Sponsored Links