CSS Codes
CSS Layouts
FF1+ IE7+ Opera8+

Flex Level Drop Down Menu (v2.0)

Author: Dynamic Drive

Version 2.0 (April 16, 2015): Adds mobile friendly, overlay version of menu that's activated in mobile and small screen browsers. Refines drop down menu behaviour when there's neither space to the right nor left to accommodate sub menu; in that case sub menu overlaps parent menu. Requires jQuery 1.8+

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.
  • Menu transforms into an overlay menu when the user's device or browser screen is below a certain width, ensuring a smooth experience regardless of screen size. v2.0 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:

AA Dynamic Drive BB

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 mdnFlexdropdown.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 right arrow image
backarrowpath: 'left.gif', //full URL or path to back arrow image (inside mobile menu)
animspeed: 200, //reveal animation speed (in milliseconds)
showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds
mobilemediaquery: "screen and (max-width: 800px)", // CSS media query string that when matched activates mobile menu (while hiding default)

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;
}

Configuring the mobile portion of the menu

Flexible Drop Down Menu converts to a full screen mobile menu when the desired criteria is matched. The following screenshot shows what happens to a Flexible Menu when the page is resized below the mobile breaking point:


Screenshot: Menu in mobile mode

Instead of a usual drop down menu, a centered compact list menu appears in its place on top of an overlay. Clicking outside the menu dismisses it.

- Setting the mobile threshold

You'll want to set the threshold when the user's environment is considered to be in "mobile", so the mobile version of the menu is activated. Inside flexdropdown.js, modify the line:

mobilemediaquery: "screen and (max-width: 600px)", // CSS media query string that when matched activates mobile menu (while hiding default)

The portion in red should be a valid CSS media query to match when the menu switches over to the mobile version. Some examples of valid CSS media queries are as follows:

  • screen and (max-width: 600px)  //when the browser width is 700px or below, desktop or mobile alike
  • screen and (max-device-width: 480px)  //when the device width is 480px or below, which usually only means in mobile environments
  • screen and (max-device-width: 480px) and (orientation: portrait)  // when device width is 480px or below and in portrait mode only

The most common decision to make is whether to use max-width or max-device-width- the former means the value set applies to both desktop and mobile browsers, while the later limits the resulting match to only mobile devices, with desktop browsers always showing the regular menu.

IMPORTANT: Your page should carry the META tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the HEAD section of your page to ensure the best mobile experience with this menu. This META tag instructs mobile browsers not to zoom out when rendering the webpage by default, which will lead to CSS media queries not being matched properly if the page is.

The style of the menu is defined inside flexdropdown.css, under "## Mobile menu container CSS ####".

Table Of Contents

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