Cut & Paste Animated Outline Menu
|
Description: A drop down menu with a sleek "outline"
animation added when it drops down, applicable to any anchor link.
The menu can be set to appear either via a "click" or "mouseover"
of the anchor link.
Structure wise, each animated outline menu is simply defined as regular list menus on the page, and supports an optional height setting that causes that menu to be scrollable (useful for very tall menus with lots of links). Nifty! This script is powered by the versatile jQuery library.
Example:
Directions:
Step 1: Add the following code to the <head> section of your page:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jkoutlinemenu.css" />
<script type="text/javascript" src="jkoutlinemenu.js">
/***********************************************
* Animated Outline Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
It references two external files. Download them below (right click, and select "save as"):
Step 2: Add the below sample HTML to your page, which includes two anchor links, plus two corresponding Animated Outline menus:
Enjoy!
Configuration info
To set up an Animated Outline Menu over an anchor link on the page, first, define any arbitrary link to be used as the anchor:
<a href="#" id="designanchor">Web Design Links</a>
Give it a unique ID attribute value. Then, define the outline
menu for it using the below conventions, and at the very end of your document
(right above the </body> tag):
<div id="mymenu1" class="outlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>
</ul>
</div>
<script type="text/javascript">
//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)
jkoutlinemenu.definemenu("designanchor", "mymenu1", "mouseover", 180)
</script>
</body>
Each outline menu should be a DIV that contains a UL
list menu. Give the outermost DIV a unique ID, plus a class of
"outlinemenu" to style it. Finally, call the function
jkoutlinemenu.definemenu() to tie everything together:
jkoutlinemenu.definemenu("designanchor", "mymenu1", "mouseover", 180)
-
First parameter: ID value of the anchor link
-
Second parameter: ID value of the outline menu
-
Third parameter: Either a value of "
mouseover" or "click", which controls whether the menu is revealed when the user hovers over or clicks on the anchor link. -
Forth parameter: An optional parameter specifying the width in pixels of this menu (integer value). To skip it, enter
nullinstead. -
Fifth parameter: An optional parameter specifying the height in pixels of this menu (integer value). If the specified value is smaller than the default menu height, the script adds vertical scrollbars to allow the user to scroll the menu contents. To skip it, simply do not define any value for it.