Back to BuildingBlocks Index or press "h"
Step 1: Add the following style sheet to the head section of your page:<style>
<!--
#iewrap{
position:relative;
height:30px
}
#iewrap2{
position:absolute
}
#dropmenu03{
filter:revealTrans(Duration=1.5,Transition=12)
visibility:hide
}
-->
</style>
Step 2: Insert the below code into the <body> section of
your page where you wish the drop down link to appear:
<ilayer id="dropmenu01" height=35px>
<layer id="dropmenu02" visibility=show>
<span id="iewrap">
<span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="alternate.htm">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer>
<script language="JavaScript1.2">
//set below variable to false if you wish to turn off "fade-off" effect for IE 4 users
var enableeffect=true
//change the contents of the array to your own. You may extend this list as neccessary
var selection=new Array()
selection[0]='<font face="Verdana"><a href="ff">Link 1</a><br>'
selection[1]='<a href="ff">Link 2</a><br>'
selection[2]='<a href="ff">Link 3</a><br>'
selection[3]='<a href="ff">Link 4</a><br>'
selection[4]='<a href="ff">Link 5</a><br></font>'
if (document.layers)
document.dropmenu01.document.dropmenu02.visibility='show'
function dropit2(){
if (document.all){
dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (dropmenu03.style.visibility=="hidden"){
if (enableeffect)
dropmenu03.filters.revealTrans.apply()
dropmenu03.style.visibility="visible"
if (enableeffect)
dropmenu03.filters.revealTrans.play()
}
else{
hidemenu()
}
}
}
function dropit(e){
if (document.dropmenu03.visibility=="hide")
document.dropmenu03.visibility="show"
else
document.dropmenu03.visibility="hide"
document.dropmenu03.left=e.pageX-e.layerX
document.dropmenu03.top=e.pageY-e.layerY+19
return false
}
function hidemenu(){
if (enableeffect)
dropmenu03.filters.revealTrans.stop()
dropmenu03.style.visibility="hidden"
}
function hidemenu2(){
document.dropmenu03.visibility="hide"
}
if (document.layers){
document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK)
document.dropmenu01.document.dropmenu02.onclick=dropit
}
else if (document.all)
document.body.onclick=hidemenu
</script>
Step 3: Add the below code inside the <body> section as
well. It should always follow the above fragment, and inserted in open space (not contained
inside any other tags, such as a <table>).
<div id="dropmenu03" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu03.captureEvents(Event.CLICK)
document.dropmenu03.onclick=hidemenu2
}
</script>
Configuring the drop down link: Obviously, you'll want to change the links inside the menu to your own. To do so, change the contents inside array "selection[]" of Step 2. 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 <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:
| . | Sample document: | . |
| . | Menu here | . |
Another note: The default url of the drop down link is "alternate.htm", which is the url old browsers will follow (NS 3, IE 3, for example), for the sake of backwards compatibility. Make it a good one!
Back to BuildingBlocks Index or press "h"