squigs Posted July 20, 2013 Share Posted July 20, 2013 Hello, I am building a navigation bar with sub menus which appear when the main item is clicked and disappear when the user clicks elsewhere. I have read numerous posts concerning this topic but I'm not sure how to implement it. My code is as follows: topNav.js <script> var timeout = 50; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if (ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if (closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // need to somehow close layer when click-out </script> Html <body> <div id="main_nav"> <ul id="nav"> <li class="nav"><a href="#" onclick="mopen('m1')"> <span class="nav_parent">CONTACT US</span></a> <div id="m1"> <a href="#">General Inquiries</a> <a href="#">Request a Quote</a> <a href="#">Submit Plans</a> <a href="#">Submit Photos</a> </div></li> </ul> </div> </body> An example of this is at http://jsfiddle.net/schwiegler/t859A/21/ Link to comment https://forums.phpfreaks.com/topic/280358-showhide-div-in-nav-menu/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.