jQuery click to show/hide menu, similar to desktop app


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



Copy this code and paste it in your HTML
  1. $(document).ready(function() {
  2.  
  3. $('li ul').hide();
  4.  
  5. $('a.arrow').click(function(e) {
  6. e.preventDefault();
  7. $(this).find('+ ul').toggle();
  8. $(this).toggleClass('active');
  9.  
  10. s = $(this).parent().find('ul');
  11. $('a.arrow').parent().find('ul:visible').not(s).hide(0,function() {
  12. $(this).parent().find('a.arrow').removeClass('active');
  13. });
  14. // Wooo it works! Clicking a button hides the current open one and removes the 'active' class
  15. });
  16.  
  17.  
  18. $("a.arrow").mouseover(function(){ $(this).addClass('over')})
  19. .mouseout(function(){ $(this).removeClass('over')});
  20. // Hover class to be added or removed on hover. Don't need :hover css if using this
  21.  
  22.  
  23. $(document).click(function(event){
  24. var target = $(event.target);
  25. if (target.parents("body li").length == 0) {
  26. $("a.arrow").removeClass('active');
  27. $("a.arrow").parent().find("ul").hide();
  28. }
  29. event.stopPropagation();
  30. });
  31. // Hide all menus when clicking outside of them (i.e on the document)
  32.  
  33. });
  34.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.