Advanced Search

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

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

Expand | Embed | Plain Text

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.