»
EnglishFrenchVietnamese

Print - Simple Top Navigator Bar - JavaScriptBank.com

Full version: jsB@nk » Menu » Navigation » Simple Top Navigator Bar
URL: https://www.javascriptbank.com/simple-top-navigator-bar.html

Simple Top Navigator Bar © JavaScriptBank.comA simple sliding JavaScript menu script where you just make simple steps. This JavaScript can now be used as single or multiply topmenus.

Full version: jsB@nk » Menu » Navigation » Simple Top Navigator Bar
URL: https://www.javascriptbank.com/simple-top-navigator-bar.html



CSS
<style>{ font-family: Verdana, Arial, sans-serif; }.pop { visibility:hidden }.go { visibility:visible }A:Hover { color:red; text-decoration:underline }A { color:blue; text-decoration:none }</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language="javascript">function showObject() {document.all.div1.className = 'go';}function hideObject() {document.all.div1.className = 'pop';}function showObject2() {document.all.div2.className = 'go';}function hideObject2() {document.all.div2.className = 'pop';}function showObject3() {document.all.div3.className = 'go';}function hideObject3() {document.all.div3.className = 'pop';}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<table><tbody><tr><td><div style="background-color: silver; width: 140px;" onmouseover="showObject()" onmouseout="hideObject()"><a href="#" onmouseover="showObject()" onmouseout="hideObject()">Search</a></div><div id="div1" onmouseover="showObject()" onmouseout="hideObject()" class="pop" style="background-color: black; width: 140px;"><a href="http://www.lycos.com/" onmouseover="showObject()" onmouseout="hideObject()">Lycos</a><br><a href="http://www.yahoo.com/" onmouseover="showObject()" onmouseout="hideObject()">Yahoo</a><br><a href="http://www.excite.com/" onmouseover="showObject()" onmouseout="hideObject()">Excite</a><br><font color="black">|</font></div></td><td><div style="background-color: silver; width: 140px;" onmouseover="showObject2()" onmouseout="hideObject2()"><a href="#" onmouseover="showObject2()" onmouseout="hideObject2()">Browsers</a></div><div id="div2" onmouseover="showObject2()" onmouseout="hideObject2()" class="pop" style="background-color: black; width: 140px;"><a href="http://www.netscape.com/" onmouseover="showObject2()" onmouseout="hideObject2()">Netscape</a><br><a href="http://www.microsoft.com/" onmouseover="showObject2()" onmouseout="hideObject2()">IE</a><br><font color="black">|<br>|</font></div></td><td><div style="background-color: silver; width: 140px;" onmouseover="showObject3()" onmouseout="hideObject3()"><a href="#" onmouseover="showObject3()" onmouseout="hideObject3()">Music</a></div><div id="div3" onmouseover="showObject3()" onmouseout="hideObject3()" class="pop" style="background-color: black; width: 140px;"><a href="http://www.winamp.com/" onmouseover="showObject3()" onmouseout="hideObject3()">Winamp</a><br><a href="http://www.realplayer.com/" onmouseover="showObject3()" onmouseout="hideObject3()">RealPlayer</a><br><font color="black">|<br>|</font></div></td></tr></tbody></table><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->