New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE7+ Opera8+

Flex Level Drop Down Menu (v1.3)

Author: Dynamic Drive

Version 1.3 (Nov 28th, 2011): Script now dynamically adds a class of "selected" to the anchor link while its drop down menu is expanded, for easy styling of the anchor link during its "open" state.

Description: More robust than a regular menu bar, this flexible menu script lets you add a multi level drop down menu to any link on the page. A close relative of Flex Level Pop Up Menu, each menu can either drop down or to the right of the anchor element (useful when the link is a side bar link). The menus intelligently reposition themselves when too close to the browser edges. Structure wise each drop down menu is simply defined as a regular nested UL on the page, making it very intuitive to set up, not to mention search engine friendly. Lets run down the script's 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. Also supports dynamic definition using JavaScript. v1.1 feature
  • 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.

Drop Down Menu:

Dynamic Drive

Drop to the right, with custom offset of 8px horizontally, 0px vertically, added:

Webmaster Resources


Directions Developer's View

Step 1: This script uses three external files, including an image. Download them below (right click, and select "Save As"):

Step 2: Insert the following code into the <head> section of your page:

Select All

Step 3:  Add the below menu code to the BODY section of your page, which contains two arbitrary anchor links and their corresponding drop down menus:

Select All

Well, that's it for installation. Read on for more details on setting up Flex Level Drop Down menu.

Basic Setup Information

Defining and adding a Flex Drop Down menu to a link is simple enough. Firstly, define the drop down menus themselves anywhere on the page, which should each just be a regular UL list, nested if you desire multiple levels. For example:

<ul id="flexmenu1" class="flexdropdownmenu">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

Notice how the UL menu carries a unique ID and CSS class of "flexdropdownmenu". This is required. The ID attribute can be arbitrary but unique in value.

With the drop down menu defined, to associate it with a link on the page, just insert the attribute "data-flexmenu" inside it pointing to the ID of the desired drop down menu:

<a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu1">Dynamic Drive</a>

And that's it. Moving the mouse over the link "Dynamic Drive" above will now show the drop down menu with ID "flexmenu1".

Instead of defining your flex menus as ULs literally on the page, you can also dothis dynamically using JavaScript, such as inside an external .js file. See "Dynamically applying flex menu to a link, defining your flex menu contents" for more info.

Setting drop down menu direction, custom offsets

The default behaviour of each drop down men is to appear beneath the anchor link, with no additional x or y offset. You can modify both of these aspects with the following two custom optional attributes, which are inserted inside your anchor link just like "data-flexmenu":

  • data-dir: Enter "h" to cause the menu to drop down horizontally, or to the right of the anchor link. This is typically useful for side bar anchor links that's located in the very left or right column on the page. Default value is "v", which is to drop down.
  • data-offsets: Enter two numbers in the format [x,y] to specify the x and y offset of the drop down menu relative to its normal position. Default value is [0,0]. For example, lets say you want to move the drop down menu 5px over to the right and 3px downwards- enter the value [5,3].

The following causes a drop down menu to move 2px downwards from its default position:

<a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu1" data-offsets="[0,3]">Dynamic Drive</a>

Other Global Settings

There are also a few variables inside flexdropdown.js that you may wish to edit, which affect things such as the arrow image's full path, animation speed, plus delay before menu appears/ disappears onMouseover:

arrowpath: 'arrow.gif', //full URL or path to arrow image
animspeed: 200, //reveal animation speed (in milliseconds)
showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds

Styling the active anchor link and anchor parent LI

Whenever you mouse over the anchor link to reveal its drop down menu, the script temporarily adds a CSS class of "selected" to the anchor link. This gives you a way to easily style the anchor link during its active state using CSS. Given the following anchor link for a Flex Drop Down Menu:

<a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu1">Dynamic Drive</a>

To apply a yellow background to the link while its drop down menu is open, you could just do the following inside your CSS:

a.selected{
background: yellow;
}

Or to be more specific in your targeting, the following instead:

a[data-flexmenu="flexmenu1"].selected{
background: yellow;
}

Inside the Drop Down Menu, the script also adds a CSS class of "selected" to the parent LI of the UL the mouse is currently over. This enables you to "highlight" the currently selected LI element. To customize this "selected" class, inside flexdropdown.css, find and edit the following part in bold:

.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a{
background: #F0CE7D;
}

Table Of Contents

This script consists of an index page plus two supplementary pages: