Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Trình đơn định hướng kiểu công tắc
URL: https://www.javascriptbank.com/switch-navigation-menu.html
Hiệu ứng tạo ra một trình đơn nhiều cấp trên trang web với tính năng giống như một cái công tắc điện - mỗi thời điểm chỉ có một tùy chọn của trình đơn được mở rộng mà thôi.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Trình đơn định hướng kiểu công tắc
URL: https://www.javascriptbank.com/switch-navigation-menu.html
<style type="text/css">.menutitle{cursor:pointer;margin-bottom: 5px;background-color:#ECECFF;color:#000000;width:140px;padding:2px;text-align:center;font-weight:bold;/*/*/border:1px solid #000000;/* */}.submenu{margin-bottom: 0.5em;}</style>
<script type="text/javascript">/************************************************ Switch Menu script- by Martial B of http://getElementById.com/* Modified by Dynamic Drive for format & NS4/IE4 compatibility* Visit http://www.dynamicdrive.com/ for full source code***********************************************/if (document.getElementById){document.write('<style type="text/css">n')document.write('.submenu{display: none;}n')document.write('</style>n')}function SwitchMenu(obj){if(document.getElementById){var el = document.getElementById(obj);var ar = document.getElementById("masterdiv").getElementsByTagName("span");if(el.style.display != "block"){for (var i=0; i<ar.length; i++){if (ar[i].className=="submenu")ar[i].style.display = "none";}el.style.display = "block";}else{el.style.display = "none";}}}</script>
<!-- Keep all menus within masterdiv--><div id="masterdiv"><div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div><span class="submenu" id="sub1">- <a href="new.htm">What's New</a><br>- <a href="hot.htm">What's hot</a><br>- <a href="revised.htm">Revised Scripts</a><br>- <a href="morezone/">More Zone</a></span><div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div><span class="submenu" id="sub2">- <a href="notice.htm">Usage Terms</a><br>- <a href="faqs.htm">DHTML FAQs</a><br>- <a href="help.htm">Scripts FAQs</a></span><div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div><span class="submenu" id="sub3">- <a href="http://jsbank.topcites.com">JSBank</a><br></span><div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div><span class="submenu" id="sub4">- <a href="http://www.JavaScriptBank.com">JavaScriptBank.com</a><br>- <a href="http://www.javavietnam.org">JavaScriptBank.com</a><br>- <a href="http://JavaScriptBank.com">JavaScriptBank.com</a><br>- <a href="http://JavaScriptBank.com">JavaScriptBank.com</a></span></div>