Version complète: jsB@nk » Menu » Multilevel menu » Multilevel Drop Down Menu horizontal
URL: https://www.javascriptbank.com/multilevel-drop-down-horizontal-navigation.html
Ce 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 complète: jsB@nk » Menu » Multilevel menu » Multilevel Drop Down Menu horizontal
URL: https://www.javascriptbank.com/multilevel-drop-down-horizontal-navigation.html
<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><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><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>