Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Trình đơn xổ dọc đơn giản
URL: https://www.javascriptbank.com/simple-drop-down-navigations.html
Trình đơn xổ dọc này trong rất gọn nhẹ và dễ dàng để cài đặt vào bất cứ vị trí nào trên trang web của bạn. Đặc điểm của trình đơn JavaScript trong đoạn mã JavaScript này là trình đơn JavaScript được thiết kế theo chuẩn Web 2.0, không dùng bảng (tableless) và rất dễ để thay đổi độ sâu của trình đơn.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Trình đơn xổ dọc đơn giản
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-->