Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Trình đơn định hướng nhiều cấp
URL: https://www.javascriptbank.com/multilevel-drop-down-horizontal-navigation.html
Hiệu ứng này kết hợp cả CSS và JavaScript để tạo một trình đơn định hướng nhiều cấp trên trang web, các trình đơn con sẽ xổ xuống khi người dùng rê con trỏ chuột vào. Bạn có thể dễ dàng thêm nhiều cấp như mong muốn và hiệu ứng này không sử dụng thẻ table để thiết kế trình đơn mà dùng kĩ thuật CSS đang thịnh hành hiện nay.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Trình đơn định hướng nhiều cấp
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>