CODEWITHSUNDEEP
jquery
Darshak Padia
Darshak Padia

Reputation: 21

jQuery menu animate issue

I would like you to help me with my problem. You can have a look at the current working of the Menu at www.darshakspadia.com/demo/jQuery-Issue/index.html

My problem is that I want this the menu to

  1. Open on clicking & not on hover.
  2. Close the active closes when I click the other navigation button.

Here is the jQuery I'm using for this effect

$(document).ready(function(){

    //Remove outline from links
    $(".home-nav a").click(function(){
        $(this).blur();
    });

    //When mouse rolls over
    $(".home-nav li").mouseover(function(){
        $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $(".home-nav li").mouseout(function(){
        $(this).stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'})
    });

});

If i change the ".mouseover" to ".click" the problem is than it appears of click but as soon as I hover out of the current box it disappears.

And If I change both ".mouseover" & ".mouseout" to .click nothing happens.

My main problem is I need the effect as it is.

Kindly Some one help with this as this is really and emergency for me.

If you want that I can even share the required files used so that you can help me..

Upvotes: 2

Views: 190

Answers (4)

gaurang171
gaurang171

Reputation: 9080

For Above Issue, i have done bins on http://codebins.com/bin/4ldqpau/

So, try following script:

function hideMenu() {
    $(".home-nav li").each(function() {
        $(this).stop().animate({
            height: '80px'
        }, {
            queue: false,
            duration: 800,
            easing: 'easeOutBounce'
        });
    });
}
$(function() {
    $(".home-nav li").click(function() {
        hideMenu();
        $(this).stop().animate({
            height: '260px'
        }, {
            queue: false,
            duration: 800,
            easing: 'easeOutBounce'
        });
    });
});

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

you can use bind() multiple events method and with some css tricks to hold height still:

css

.active { height:260px !important; } // to hold steady

jQuery:

$(".home-nav li").bind({

    click: function(){
       $(".home-nav li").stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'});
       $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'},
       function(){//when animation complete
          $(".home-nav li").removeClass('active');//to remove class from all
          $(this).addClass('active');//adds class clicked one
       });
    },

    mouseover: function(){
       $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'});
    },

    mouseleave: function(){
       $(this).stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'});
    }

});

Upvotes: 0

WolvDev
WolvDev

Reputation: 3226

You need to use the click event instead of mouseover and out. Inside the click function you need to close all others and open the clicked one.

$(document).ready(function(){ 

    //Remove outline from links 
    $(".home-nav a").click(function(){ 
        $(this).blur(); 
    }); 

    $(".home-nav li").click(function(){ 
        //Close all others
        $(".home-nav li").stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'});
        //Open this one
        $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'}) 
    }); 

});

Upvotes: 0

Yograj Gupta
Yograj Gupta

Reputation: 9869

You can try this, remove your mouseover and mouseout.

$(".home-nav li").click(function(){
     $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'});
    $(this).siblings().stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'});
});

Upvotes: 1

Related Questions