Step 2: Add the below code to the HEAD section of your page:
Select All
<link rel="stylesheet" type="text/css" href="anylinkmenu.css" /> <script type="text/javascript" src="menucontents.js"></script> <script type="text/javascript" src="anylinkmenu.js"> /*********************************************** * AnyLink JS Drop Down Menu v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code ***********************************************/ </script> <script type="text/javascript"> //anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu) anylinkmenu.init("menuanchorclass") </script>
Step 2: Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates 3 links, one with the menu dropping down onMouseover, and the other, onClick:
Select All
<!--1st anchor link--> <p><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1">Default Example</a></p> <!--2nd anchor link--> <p><a href="http://www.dynamicdrive.com" class="menuanchorclass someotherclass" rel="anylinkmenu2[click]" rev="lr">Right dropping menu</a> (click to reveal)</p> <!--3rd anchor link--> <p style="text-align:center"><a href="http://www.dynamicdrive.com" class="menuanchorclass myownclass" rel="anylinkmenu3">Menu with multiple columns</a></p> <!--4th anchor link--> <p><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu4" data-image="http://i44.tinypic.com/2mni3yx.gif" data-overimage="http://i43.tinypic.com/24fycd5.gif"><img src="http://i44.tinypic.com/2mni3yx.gif" style="border-width:0" /></a></p>
Customization of the Drop Down Menu Contents
The very first step to customizing AnyLink Drop Down Menu is to familiarize yourself with the structure of the .js file that contains your menu contents, or "menucontents.js". To edit this file, open it up using any text editor. In it you'll find code blocks that each contain the contents for one particular drop down menu, for example:
