Easy Show and Hide submenus


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <script language="javascript" type="text/javascript">
  2. function subMenu(show) {
  3. if (show){
  4. document.getElementById('sub_menu').style.display = 'block';
  5. } else {
  6. document.getElementById('sub_menu').style.display = 'none';
  7. }
  8. }
  9. </script>
  10.  
  11. <div class="top_menu">
  12. <a href="index.html">Home</a>&nbsp;&nbsp; |&nbsp;&nbsp;
  13. <a href="link.html" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">SubmenuLink</a>&nbsp;&nbsp; |&nbsp;&nbsp;
  14. <a href="link.html">other Link 1</a>&nbsp;&nbsp; |&nbsp;&nbsp;
  15. <a href="link.html">other link 2</a>&nbsp;&nbsp; |&nbsp;&nbsp;
  16. </div>
  17. <div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
  18. <a href="link.html">sub 1</a>&nbsp;&nbsp; |&nbsp;&nbsp;
  19. <a href="link.html">sub2</a>&nbsp;&nbsp; |&nbsp;&nbsp;
  20. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.