« »

Click on the JavaScript menu items to see the submenu flyouts. Each submenu is on a separate layer/div and is moved in and out by the functions written in JavaScript.

Label: Flyout Menu

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT>
//detecting browser to dynamically write appropriate DIVs/LAYERs
N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)
S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)
M=(navigator.appName.indexOf('Microsoft')!=-1)



Vis=new Array()
Vis[0]=(M||S) ? "hidden" : "hide"
Vis[1]=(M||S) ? "visible" : "show"

function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""

Styl = (M||S) ? "<DIV" : "<LAYER"

if(M||S){
Styl+=" ID="+divId
Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol
Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd
Styl+="'>"
}

if(N){
Styl+=" ID="+divId
Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol
Styl+=" visibility="+Vis[visb]+" z-index="+zInd
Styl+=">"
}
document.writeln(Styl)
}

function EndDiv(){
(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")
}

function PutIt(ID,dX,dY){
if(N){
document.layers[ID].left=dX
document.layers[ID].top=dY
}
if(M){
document.all[ID].style.left=dX
document.all[ID].style.top=dY
}
if(S){
document.getElementById(ID).style.left=dX
document.getElementById(ID).style.top=dY
}
}

function ShowHide(ID,vs){
if(N){
document.layers[ID].visibility=Vis[vs]
}
if(M){
document.all[ID].style.visibility=Vis[vs]
}
if(S){
document.getElementById(ID).style.visibility=Vis[vs]
}
}

function Xof(ID){
if(N){
return document.layers[ID].left
}
if(M){
return document.all[ID].style.left
}
if(S){
return document.getElementById(ID).style.left
}
}

function Yof(ID){
if(N){
return document.layers[ID].top
}
if(M){
return document.all[ID].style.top
}
if(S){
return document.getElementById(ID).style.top
}
}



function Zind(ID,zz){
if(N){
document.layers[ID].zIndex=zz
}
if(M){
document.all[ID].style.zIndex=zz
}
if(S){
document.getElementById(ID).style.zIndex=zz
}
}

function ChangeCol(ID,colrx){
if(M)document.all[ID].style.background=colrx
if(N)document.layers[ID].bgColor=colrx
if(S)document.getElementById(ID).style.background=colrx
}

function DivWrite(IdName,Str) {
if (N){
document.layers[IdName].document.write(Str)
document.layers[IdName].document.close()
}
if(M) document.all[IdName].innerHTML=Str
if(S) document.getElementById(IdName).innerHTML=Str
}
</SCRIPT>

<SCRIPT>
if(document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=newPos;


function newPos(e){
mX=(navigator.appName.indexOf("Microsoft")!=-1)?event.clientX:e.pageX
mY=(navigator.appName.indexOf("Microsoft")!=-1)?event.clientY:e.pageY
if(mX>300||mY>200) ClearAll()
}



GetDiv('Menu1',10,0,100,100,'lime',1,0)
document.write("<b>Menu 1</b><br>")
document.write("<a href='pages/page1.html'>Page1 - intro</a><br>")

document.write("<a href='pages/page2.html'>Page2 - home</a><br>")

document.write("<a href='pages/page3.html'>Page3 - pool</a><br>")
EndDiv()

GetDiv('Menu2',50,0,100,100,'yellow',1,0)
document.write("<b>Menu 2</b><br>")
document.write("<a href='pages/page4.html'>Page4 - deco</a><br>")

document.write("<a href='pages/page5.html'>Page5 - garden</a><br>")

document.write("<a href='pages/page1.html'>Page1 - fence</a><br>")
EndDiv()

GetDiv('Menu3',90,0,100,100,'cyan',1,0)
document.write("<b>Menu 3</b><br>")
document.write("<a href='pages/page3.html'>Page3 - car</a><br>")

document.write("<a href='pages/page4.html'>Page4 - boat</a><br>")

document.write("<a href='pages/page5.html'>Page5 - balcony</a><br>")
EndDiv()


GetDiv('Cover',0,0,100,200,'white',1,1)
document.write("<h1><a href='javascript:MoveMenu(1)'>Menu1</a><br>")
document.write("<a href='javascript:MoveMenu(2)'>Menu2</a><br>")
document.write("<a href='javascript:MoveMenu(3)'>Menu3</a></h1>")
EndDiv()

l=0
X=0

Out=null

function MoveMenu(m){
if(Out==m){ClearAll();clic=0;return}
if(m==X) return
Out=m
MenU=(M)?document.all["Menu"+m].style:document.layers["Menu"+m]
if(X>0) MenX=(M)?document.all["Menu"+X].style:document.layers["Menu"+X]
Cont=setInterval('MoveIt()',5)
}



function MoveIt(){
l+=4
MenU.left=l
if(X>0) MenX.left=101-l
if(l>100) HaltIt()
}



function HaltIt(){
clearInterval(Cont)
l=0
X=Out
}


function ClearAll(){
if(l>0)clearInterval(Cont)
for(i=1;i<4;i++){
if(M)document.all["Menu"+i].style.left=0
if(N)document.layers["Menu"+i].left=0
Out=null
}
X=0
l=0
}

</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onresize=FixIcon()>
<TABLE width=550>
  <TBODY>
  <TR>
    <TD align=right>
      <H1>Flyout<BR>Menu</H1>Click on the menu items to see the submenu flyouts.<BR>
		Each submenu is on a separate layer/div and is moved in and out<BR>by 
		the functions written in JavaScritp.<BR>Click View|Source Code to view 
		the script.<BR>

      <HR>
      NB: This is only to give you the concept.<BR>Aesthetically, it needs a lot 
		of fine tuning. :) 
      <HR>
  </TR></TBODY></TABLE>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->