Popup Menu (Multiple Version)

[Total: 0    Average: 0/5]

this shows how to have a menu popup div boxes.

Head Code:

<STYLE TYPE="text/css">
.lauren {position:absolute;top:100;left:100;width:30;height:21;}
.mike {position:absolute;top:110;left:100;width:30;height:21;}
.menudiv{position:absolute;top:80;left:60;width:160;height:106;color:steelblue;background-color:white;border:solid;border-width:2;border-color:steelblue;z-index:10;visibility:hidden;}
.menudiv2{position:absolute;top:90;left:60;width:160;height:106;color:steelblue;background-color:white;border:solid;border-width:2;border-color:steelblue;z-index:10;visibility:hidden;}
</STYLE>

Body Code:

<DIV CLASS="lauren">
<A HREF="#" ONMOUSEOVER="menu(1,1)">Organizations</A>
</DIV>
<DIV CLASS="mike">
<A HREF="#" ONMOUSEOVER="menu(2,1)"><nobr>Mike Title</nobr></A>
</DIV>

<DIV ID="linkmenu" CLASS="menudiv">
<CENTER><B>Organizations</B>
<BR>
<BR><A HREF="http://phoenix">Phoenix</A>
<BR><A HREF="http://phoenix/aqsl-bolt/index.html">AQSL Bolt</A>
</center>
</DIV>
<DIV ID="linkmenu2" CLASS="menudiv2">
<CENTER><B>Mike Title</B>
<BR>
<BR><A HREF="/">Link 1</A>
<BR><A HREF="/js/">Link 2</A>
</center>
</DIV>

<script type=text/javascript>
var isNS=(document.layers);
if(isNS)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=track;

function track(e) 
{
var x=(isNS)?e.pageX:event.x; 
var y=(isNS)?e.pageY:event.y;
isvis(x,y);
}

function isvis(x,y) {
if(isNS) {
if(document.linkmenu.visibility!="hide") {
if(x<60||x>220||y<80||y>166)document.linkmenu.visibility="hide";
}
} else if(linkmenu.style.visibility!="hidden") {
if(x<60||x>220||y<80||y>186)linkmenu.style.visibility="hidden";
}
if(isNS) {
if(document.linkmenu2.visibility!="hide") {
if(x<60||x>220||y<90||y>201)document.linkmenu2.visibility="hide";
}
} else if(linkmenu2.style.visibility!="hidden") {
if(x<60||x>220||y<90||y>201)linkmenu2.style.visibility="hidden";
}
}

function menu(x,n) {
if (x==1) {
if(isNS) {document.linkmenu.visibility=(n!=0)?"visible":"hidden";
} else linkmenu.style.visibility=(n!=0)?"visible":"hidden";
} else if (x==2) {
if(isNS) {document.linkmenu2.visibility=(n!=0)?"visible":"hidden";
} else linkmenu2.style.visibility=(n!=0)?"visible":"hidden";
}
}

</SCRIPT>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *