| Description:
Use the below menu generator to instantly create drop down menus. Click on a text
link, and a menu appears beneath it containing "sub" links. Supports multiple
menus per page.
This script works across all DHTML browsers
(IE4+, NS4, NS6+, Opera 6), and degrades well with the rest. |
<script
language="JavaScript1.2">
//reusable/////////////////////////////
//Drop down menu by http://www.dynamicdrive.com
var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")
function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"
themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu
themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0
themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 :
themenuoffsetY+event.clientY-event.offsetY+18
hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}
function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}
if (ie4||ns6)
document.onclick=hidemenu
//reusable/////////////////////////////
</script>
Configuring the drop down links: Obviously,
you'll want to change the links inside the menus to your own. To do so, change the
contents inside array "selectionx[]" of Step 1. You may also
wish to change the width of the drop down menu, depending on the contents. To change it's
width, go to the code in Step 3. Change the width attribute inside the
each <div> from 120 to another pixel value.
Notes: The nature of this script requires
that the drop down menu link always be left-aligned in the document. "So what if I
want the link to appear in the center of the page?", you yell. Well, you'll need to
use some cheap HTML techniques. One way is to put the link (code of Step 2) inside a
columned table that's centered. For example: |
