»
AnglaisFranaisVietnamien

Imprimer - Multilevel Drop Down Menu horizontal - JavaScriptBank.com

Version complte: jsB@nk » Menu » Multilevel menu » Multilevel Drop Down Menu horizontal
URL: http://www.javascriptbank.com/multilevel-drop-down-horizontal-navigation.html

Multilevel Drop Down Menu horizontal © JavaScriptBank.comCe code utilise à la fois CSS et JavaScript pour la création de menu déroulant à plusieurs menus de navigation, sous-menus s'affiche lorsque les utilisateurs se déplacer la souris sur eux. Personnalisez-le comme vous voulez, le menu est créé avec CSS - une technique moderne de conception de sites Web, en utilisant les listes à puces et des couches cachées.

Version complte: jsB@nk » Menu » Multilevel menu » Multilevel Drop Down Menu horizontal
URL: http://www.javascriptbank.com/multilevel-drop-down-horizontal-navigation.html



CSS
<style type="text/css">#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>


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>


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>