Results 1 to 5 of 5

Thread: Change menu from hover into on-click

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    914
    Thanks
    118
    Thanked 2 Times in 2 Posts

    Default Change menu from hover into on-click

    Hey all,

    Currently I have a fixed header menu that shows itself on hover (see here). I'd like to change that into on-click.
    Below is the js code. What do I need to change, please?
    Thanks.

    Code:
    $(document).ready(function()
    {
    
    	var header_h = $("#header-wrapper").height() + 0;
    	var menu_h = $("#menu").height();
    	var speed = 500;
    	var logo2_url = "http://www.lichaamengeest.be/img/transparant.png";
    	
    	var scroll_critical = parseInt(header_h - menu_h);
    	var window_y = 0;
    	var menu_left_margin = 100;
    	menu_left_margin = parseInt($(".header").css("width")) - parseInt($("ul.menu").width());
    	
    	window_y = $(window).scrollTop();
    	var $logo2_link = $("<a/>", {"href": "index.php"})
    	var $logo2 = $("<img />", {"src" : logo2_url, "class" : "logo2"}).appendTo($logo2_link);
    	
    	
    	if ( (window_y > scroll_critical) && !(is_touch_device()) ) header_transform();
    	
    	function header_transform(){
    			window_y = $(window).scrollTop();
    			
    			if (window_y > scroll_critical) {
    				if (!($("#header-wrapper").hasClass("fixed"))){
    						$("#header-wrapper").hide();
    						$("#wrapper").css("margin-top", header_h + "px");
    						$("#header-wrapper").addClass("fixed");
    						$("#header-wrapper").fadeIn(500);
    						$logo2_link.fadeIn().appendTo(".header");
    				}
    
    				
    			} else {
    				if (($("#header-wrapper").hasClass("fixed"))){
    					$("#header-wrapper").fadeOut(500, function(){
    						$("#header-wrapper").removeClass("fixed");
    						$("#wrapper").css("margin-top", "");
    						$("#header-wrapper").fadeIn(300)
    					});
    					
    					$logo2_link.fadeOut().remove();
    				}
    
    			}
    	}
    	
    
    	
    	$(window).scroll(function(){
    		if (!(is_touch_device())) header_transform();			
    
    	})
    
    	
    });

  2. #2
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    914
    Thanks
    118
    Thanked 2 Times in 2 Posts

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    In your js/custom.js, there's a lot of hover. What happens if you replace that with click?

  4. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    914
    Thanks
    118
    Thanked 2 Times in 2 Posts

    Default

    Just changed hover into click, but nothing happens.
    I replaced it by this, but still no result: https://gist.github.com/JamieS/917446
    These don't seem to work: http://stackoverflow.com/questions/7...her-than-hover
    Last edited by chechu; 02-04-2015 at 02:13 PM.

  5. #5
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    914
    Thanks
    118
    Thanked 2 Times in 2 Posts

Similar Threads

  1. Change Smooth Nav Menu Arrow on Hover
    By charlieboy in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 06-26-2012, 08:38 AM
  2. How to make the mega menu to be shown by click instead of hover ?
    By naremkim in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 08-01-2011, 01:32 PM
  3. To change from mouse-click to mouse-hover on SlashDot menu script *please*
    By kevinhannan in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-28-2010, 09:22 PM
  4. Change hover color for each menu item
    By nefarious2all in forum CSS
    Replies: 10
    Last Post: 01-12-2009, 10:51 PM
  5. AnyLink CSS Vertical Menu - on click rather than hover?
    By batfastad in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 12-07-2006, 11:43 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •