CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vemund
vemund

Reputation: 1807

Menu: On hover toggle div slide from top

I'm making a slide down menu that opens when hovering .account-nav-show. I have done the slide down function, but it wont slide back up when you remove your arrow from .account-nav-show. Also, What I'm trying to do is to make it stay open until you take your arrow down into the actual #account-nav. Any ideas?

Also, the div where the .account-nav-show is, has a :hover, so it changes color when you hover the .account-nav-show. Is it possible to keep it at :hover when you slide the arrow down into the #account-nav? 

      <script type="text/javascript">

$(document).ready(function(){

        $("#account-nav").hide();
        $(".account-nav-show").show();

    $('.account-nav-show').hover(function(){
    $("#account-nav").slideDown(400);
    });

});

</script>
<a class="account-nav-show">Account</a> 
<div id="account-nav">
<a href="/account">Account</a><br>
{{ 'Log out' | customer_logout_link }} 
</div>

Upvotes: 0

Views: 545

Answers (1)

Zav
Zav

Reputation: 661

Add this after hover binding:

$('.account-nav-show').on('mouseleave', function(){
    $("#account-nav").slideUp(400);
});

Here is final code you need:

<script type="text/javascript">
    $(document).ready(function(){
        $("#account-nav").hide();
        $(".account-nav-show").show();

        $('.account').hover(function(){
            $("#account-nav").slideDown(400);
        });

        $('.account').on('mouseleave', function(){
            $("#account-nav").slideUp(400);
        });
    });
</script>

<div class="account">
    <a href="#" class="account-nav-show">Account</a> 
    <div id="account-nav">
        <a href="/account">Account</a><br>
        {{ 'Log out' | customer_logout_link }} 
    </div>
</div>

There is JSFiddle example: http://jsfiddle.net/odorcxeu/

Upvotes: 1

Related Questions