Menu Pops Up

[Total: 0    Average: 0/5]

This is a menu that will pop up where ever the user clicks the left mouse button.

Head Code:

<style type=text/css>
.menuBack {  position: absolute;  visibility: hidden;  border: solid 1px; border-left-color:#202080;  border-top-color:#2020A0; border-bottom-color:#202040;border-right-color:#202020;margin: 0px 0px 0px 0px;overflow:none;}
.menuBorder {  position: relative;  left:0px;  top:0px;  visibility: inherit;  background-color:#AACCFF;  color: #000000;  border: solid 1px;  border-left-color:#202080;  border-top-color:#2020A0;  border-bottom-color:#202040;  border-right-color:#202020;  margin: 0px 0px 0px 0px;  overflow:none;  }
.menuItem {  position: relative;  left: 0px;  top: 0px;  width: 40px;  text-align: left;  background-color: transparent;  color: steelblue;  visibility: inherit;  font-family : Arial;   font-size : 9 pt;  font-weight: bold;  margin: 0px 0px 0px 0px;  cursor: default;  overflow:none;}
.menuTitle {  position: relative;  left: 0px;  top: 0px;  width:80;  text-align: center;  background-color: #FFFFFF;  color: steelblue;  visibility: inherit;  font-family : Arial;   font-size : 10 pt;  font-weight: boldest;  margin: 0px 0px 0px 0px;  cursor: hand;  overflow:none;}
.separator {  position: relative;  left: 2px;  top: 0px;  margin: -5px 0px -5px 0px;  padding-right: 2px;  visibility: inherit;  cursor: default;}
.sepclr {  color: #7F7F7F;  border-bottom: 1px solid #000040;  width:96%;}
all.netmenuBorder {  border-style: outset;  border-width: 2pt;  border-color:#C6C3C6;  }
all.netmenuItem {  color:steelblue;  text-decoration: none;  font-family: Arial;  font-size: 9pt;  font-weight: bold;}
all.netmenuTitle{  font-family : Arial;   text-decoration: none;  text-align:center;  font-size: 10pt;  font-weight: boldest;  background-color:#FFFFFF;  color: steelblue;}
all.netseparator { margin-top: 5pt;}
all.ttip {  color:steelblue;  font-family: Arial;  font-size: 9pt;  font-weight:bold;  border-style: solid;  border-width: 1pt;  border-color:#000000;}
</style>

Body Code:

<Script Language="JavaScript">
/// BEGIN CUSTMIZING
if(document.all){ 
document.writeln('<Div id="popitup" class="menuBack" style="width:100">')
document.writeln('<Div id="popmenu" class="menuBorder" style="width:100">')
document.writeln('<Div id="popl" class="menuTitle" onclick="abt()"></Div>')
document.writeln('<Div id="mainmenuitem1" class="menuItem" onmouseout="udspl(this.id)" onmouseover="cdspl(this.id,false)" onclick="gomenu('http://www.js-examples.com')">&nbsp;Home</Div>')
document.writeln('<Div id="mainmenuitem2" class="menuItem" onmouseout="udspl(this.id)" onmouseover="cdspl(this.id,true)">&nbsp;&nbsp;Forum<Img id="arowmenuitem2" Src="/images/pop_arw.gif" style="position:absolute;top:7px"></Div>')
document.writeln('<Div id="mainmenuitem3" class="menuItem" onmouseout="udspl(this.id)" onmouseover="cdspl(this.id,true)">&nbsp;&nbsp;Scripts<Img id="arowmenuitem3" Src="/images/pop_arw.gif" style="position:absolute;top:7px"></Div>')
document.writeln('<Div id="mainmenuitem4" class="menuItem" onmouseout="udspl(this.id)" onmouseover="cdspl(this.id,false)" onclick="gomenu('http://www.js-examples.com/shop')">&nbsp;Shop</Div>')
document.writeln('<Div id="mainmenuitem5" class="menuItem" onmouseout="udspl(this.id)" onmouseover="cdspl(this.id,false)" onclick="gomenu('http://www.js-examples.com/search')">&nbsp;Search</Div>')
document.writeln('<Div id="mainmenuitem6" class="menuItem" onmouseout="udspl(this.id)" onmouseover="cdspl(this.id,false)" onclick="gomenu('http://www.js-examples.com/beginners')">&nbsp;Tutorial</Div>')
document.writeln('<Div id="mainmenuitem7" class="menuItem" onmouseout="udspl(this.id)" onmouseover="cdspl(this.id,false)" onclick="gomenu('http://www.js-examples.com/consult')">&nbsp;Help</Div>')
document.writeln('</Div>')
document.writeln('</Div>')
document.writeln('<Div id="2subout" class="menuBack" style="width:80">')
document.writeln('<Div id="2subin" class="menuBorder" style="width:80">')
document.writeln('<Div id="2subitem1" class="menuItem" onmouseover="cdspl(this.id)" onmouseout="udspl(this.id)" onclick="gomenu('http://www.js-examples.com/forum/')">&nbsp;&nbsp;Index 1</Div>')
document.writeln('<Div id="2subitem2" class="menuItem" onmouseover="cdspl(this.id)" onmouseout="udspl(this.id)" onclick="gomenu('http://www.js-examples.com/forum/cindex.html')">&nbsp;&nbsp;Index 2</Div>')
document.writeln('</Div>')
document.writeln('</Div>')
document.writeln('<Div id="3subout" class="menuBack" style="width:80">')
document.writeln('<Div id="3subin" class="menuBorder" style="width:80">')
document.writeln('<Div id="3subitem1" class="menuItem" onmouseover="cdspl(this.id)" onmouseout="udspl(this.id)" onclick="gomenu('http://www.js-examples.com/js/')">&nbsp;&nbsp;Script</Div>')
document.writeln('<Div id="3subitem2" class="menuItem" onmouseover="cdspl(this.id)" onmouseout="udspl(this.id)" onclick="gomenu('http://www.js-examples.com/js/submit.html')">&nbsp;&nbsp;Submit</Div>')
document.writeln('</Div>')
document.writeln('</Div>')
document.close();
}
/// END CUSTMIZING

ie = (document.all) ? 1:0;var submenu="popitup";var wd=0;var num=0;var menuitems=0;var x;var y;var lb;var lr;var timer1;var timer2;var iev="Menu Title";var iet="true";var mbcolor="red";var mfcolor="white";var tbcolor="steelblue";var tfcolor="blue";var tdl=false;
function resz(){location.reload()}
function mdspl(e){if (ie){lr=document.body.offsetWidth+document.body.scrollLeft;lb=document.body.offsetHeight+document.body.scrollTop;with(window.event.srcElement)if(tagName!="A" && tagName!="INPUT" && tagName!="TEXTAREA" && tagName!="IMG" && tagName!="SELECT"){x=window.event.clientX+document.body.scrollLeft;y=window.event.clientY+document.body.scrollTop;if (document.all["popitup"].style.visibility=="visible"){document.all["popitup"].style.visibility="hidden";document.all[submenu].style.visibility="hidden";}else{if (y+document.all["popitup"].offsetHeight+25>=lb)y=lb-25-document.all["popitup"].offsetHeight;if (x+wd+30>=lr)x=lr-wd-30;document.all["popitup"].style.left=x;document.all["popitup"].style.top=y;document.all["popitup"].style.visibility="visible";}}}}
function toolon(){if (!tdl)timer1=setTimeout('tooldspl()',600);}
function tooloff(){clearTimeout(timer1)}
function tooldspl(){if (x+wd+document.layers["ttip"].clip.width+10>lr)document.layers["ttip"].left=x-document.layers["ttip"].clip.width;else document.layers["ttip"].left=x+wd;document.layers["ttip"].top=y+2;document.layers["ttip"].visibility="show";tdl=true;timer2=setTimeout('tooludspl()',2000);}
function tooludspl(){tdl=false;document.layers["ttip"].visibility="hide"}
function sdspl(w,t,num){if (ie){hg=document.all[w].offsetHeight+t;swd=document.all[w].offsetWidth;if (y+hg+10>=lb){sy=y+t-document.all[w].offsetHeight+16;document.all[w].style.top=sy;}else document.all[w].style.top=y+t-2;if (x+wd+swd+30>=lr){sx=document.all["popitup"].style.posLeft-swd+6;document.all[w].style.left=sx;}else document.all[w].style.left=x+wd-4;document.all[w].style.visibility="visible";}}
function cdspl(w,s){if (ie){t=document.all[w].offsetTop;document.all[w].style.color=tfcolor;document.all[w].style.background=mfcolor;if(s==true){if (submenu!="popitup")document.all[submenu].style.visibility="hidden";num=w.substring(12,w.length);w=num+"subout";submenu=w;sdspl(w,t,num);}if (s==false && submenu!="popitup")document.all[submenu].style.visibility="hidden";}}
function udspl(w){if(ie){document.all[w].style.color=tbcolor;document.all[w].style.background="transparent";}}
function gomenu(address){location.href=address;}
function abt(){var x="http://www.js-examples.com";window.open(x,'','width=640,height=440,top=0,left=0,scrollbars=1,location=1,status=1');}
function popinit(){if (ie){wd=document.all["popitup"].offsetWidth;for (x=0; x<document.all.length; x++){if (document.all[x].id.substring(0,4)=="arow"){document.all[x].style.posLeft=wd-12;document.all[x].style.posTop-=3;q=document.all[x-1].id;num=q.substring(12,q.length);q=num+"subout";var i=0;swd=document.all[q].offsetWidth;for (z=0; z<document.all.length; z++)if (document.all[z].id.length>=9 && document.all[z].id.substring(0,4)==q.substring(0,4))i++;for (z=1;z<=i;z++)document.all[num+"subitem"+(z)].style.width=swd;}if (document.all[x].id.length>=13 && document.all[x].id.substring(0,12)=="mainmenuitem")menuitems++;}for (x=1; x<=menuitems; x++)document.all["mainmenuitem"+x].style.width=wd;with (document.all["popl"]){style.width=wd;innerHTML=iev;title=iet;}document.onclick=mdspl;}}

function init(){popinit();}
window.onload=init;
</Script>
Left Click the mouse anywhere on the page (that is not over another link) and the menu will appear!

Times Viewed: 1

Leave a Reply

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