»
EnglishFrenchVietnamese

Print - Simple Drop Down Navigations - JavaScriptBank.com

Full version: jsB@nk » Menu » Multilevel menu » Simple Drop Down Navigations
URL: https://www.javascriptbank.com/simple-drop-down-navigations.html

Simple Drop Down Navigations © JavaScriptBank.comThis 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



CSS
<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-->


JavaScript
<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-->


HTML
<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-->