Navigation Menu (Dissolve) - JavaScript Made Easy

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Navigation Menu (Dissolve)
This navigation menu looks like as a link. Click on it and menu will display with a dissolve effect
Click Here To Navigate


Insert into <HEAD>
<style> <!-- #wrapper{ position:relative; height:30px } #wrapper2{ position:absolute } #coffeemenu03{ filter:revealTrans(Duration=1.5,Transition=12) visibility:hide } --> </style>

Insert into <BODY>
<ilayer id="coffeemenu01" height="35px"> <layer id="coffeemenu02" visibility="show"> <span id="wrapper"><span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false"><font face="Verdana"><b><a href="notthisbrowser.html"> <p>Click Here To Navigate</a></b></font> </span></span></layer> </ilayer> <script language="JavaScript1.2"> var enableeffect=true var selection=new Array() selection[0]='<font face="ARIAL BLACK"><a href="http://jsmadeeasy.com">Main Page</a><br>' selection[1]='<a href="http://jsmadeeasy.com/about.htm">About Us</a><br>' selection[2]='<a href="http://tutorial.jsmadeeasy.com/index.htm">Java-Script Tutorial</a><br>' selection[3]='<a href="http://www.fontsmadeeasy.com/">Choose Your Font</a><br>' selection[4]='<a href="http://jsmadeeasy.com">Popular Scripts</a><br></font>' if (document.layers) document.coffeemenu01.document.coffeemenu02.visibility='show' function dropit2(){ if (document.all){ coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (coffeemenu03.style.visibility=="hidden"){ if (enableeffect) coffeemenu03.filters.revealTrans.apply() coffeemenu03.style.visibility="visible" if (enableeffect) coffeemenu03.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.coffeemenu03.visibility=="hide") document.coffeemenu03.visibility="show" else document.coffeemenu03.visibility="hide" document.coffeemenu03.left=e.pageX-e.layerX document.coffeemenu03.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) coffeemenu03.filters.revealTrans.stop() coffeemenu03.style.visibility="hidden" } function hidemenu2(){ document.coffeemenu03.visibility="hide" } if (document.layers){ document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK) document.coffeemenu01.document.coffeemenu02.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </script> </p> <div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#C0C0C0;background-color:#C0C0C0;width:200;visibility:hidden;border:2px solid black;padding:0px"><script language="JavaScript1.2"> if (document.all) coffeemenu03.style.padding='4px' for (i=0;i<selection.length;i++) document.write(selection[i]) </script> </div><script language="JavaScript1.2"> if (document.layers){ document.coffeemenu03.captureEvents(Event.CLICK) document.coffeemenu03.onclick=hidemenu2 } </script>

Other Options