Full version: jsB@nk » Menu » Multilevel menu » Simple Drop Down Navigations
URL: https://www.javascriptbank.com/simple-drop-down-navigations.html
This clean-looking JavaScript menu horizontal is very simple to implement and can be placed anywhere on a page. Adding or deleting levels is easy to do. The JavaScript menu is created without tables, using unordered lists and hidden layers.
Full version: jsB@nk » Menu » Multilevel menu » Simple Drop Down Navigations
URL: https://www.javascriptbank.com/simple-drop-down-navigations.html
<style type="text/css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.jsbank_sample_cont {margin: 20px; padding: 20px;}.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}#dd { margin-left: 25%; padding: 0 0 20px 0;}#dd li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial;}#dd li a.menu { display: block; text-align: center; background: #5970B2; padding: 4px 10px; margin: 0 1px 0 0; color: #FFF; width: 60px; text-decoration: none;}#dd li a.menu:hover { background: #49A3FF;}.submenu { background: #EAEBD8; border: 1px solid #5970B2; visibility: hidden; position: absolute; z-index: 3;}.submenu a { display: block; font: 11px arial; text-align: left; text-decoration: none; padding: 5px; color: #2875DE;}.submenu a:hover { background: #49A3FF; color: #FFF;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">// Created by: Konstantin Jagello | http://javascript-array.com/var TimeOut = 300;var currentLayer = null;var currentitem = null;var currentLayerNum = 0;var noClose = 0;var closeTimer = null;function mopen(n) { var l = document.getElementById("menu"+n); var mm = document.getElementById("mmenu"+n); if(l) { mcancelclosetime(); l.style.visibility='visible'; if(currentLayer && (currentLayerNum != n)) currentLayer.style.visibility='hidden'; currentLayer = l; currentitem = mm; currentLayerNum = n; } else if(currentLayer) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentitem = null; currentLayer = null; }}function mclosetime() { closeTimer = window.setTimeout(mclose, TimeOut);}function mcancelclosetime() { if(closeTimer) { window.clearTimeout(closeTimer); closeTimer = null; }}function mclose() { if(currentLayer && noClose!=1) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentLayer = null; currentitem = null; } else { noClose = 0; } currentLayer = null; currentitem = null;}document.onclick = mclose; </script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><ul id="dd"> <li><a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">Home</a> <div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="http://javascriptbank.com/">HTML Tutorials</a> <a href="http://javascriptbank.com/">DHTML Tutorials</a> <a href="http://javascriptbank.com/">JavaScript Tutorials</a> <a href="http://javascriptbank.com/">CSS Tutorials</a> </div> </li> <li><a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">Download</a> <div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="http://javascriptbank.com/">ASP Scripts</a> <a href="http://javascriptbank.com/">PHP Scripts</a> <a href="http://javascriptbank.com/">Ajax Scripts</a> <a href="http://javascriptbank.com/">Perl Scripts</a> </div> </li> <li><a href="#" class="menu">Order</a></li> <li><a href="#" class="menu">Help</a></li> <li><a href="#" class="menu" id="mmenu3" onmouseover="mopen(3);" onmouseout="mclosetime();">Contact</a> <div class="submenu" id="menu3" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="http://javascriptbank.com/">Office</a> <a href="http://javascriptbank.com/">Sales</a> <a href="http://javascriptbank.com/">Customer Service</a> <a href="http://javascriptbank.com/">Shipping</a> </div> </li></ul><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->