|
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
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:
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:
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;
}
This script consists of an index page plus two supplementary pages:
|
Menu and Navigation 
