jQuery, reveal/hide absolute div on click

Question

I'm new with jQuery code.. I tried to develop a "full page menu" by me but i have some difficulty to hide menù on second click.. i tried .toggle() but i read that was retired.. can you help me? thank you so much and sorry for my bad english.

HTML

<div class="container">   
   <a id="bars" href="#">Apri/Chiudi Menù</a>
</div>

<nav id="nav" class="nav-default">
    <ul>
       <li>Home</li>
       <li>Servizi</li>
       <li>Portfolio</li>
       <li>Contatti</li>
    </ul>
</nav>

CSS

#bars {
   position: fixed;
   z-index: 2;
}

#nav {
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
}

#nav ul {
   list-style: none;
}

.nav-default {
   left: -100%;
   top:0;
   background: #ccc;
}

jQuery

$(document).ready(function() {
   $("#bars").click(
       function (){
           $(".nav-default").animate({
               left: "0"
           }, 1000, function() {
               // Animation complete.
           });
       });    
});

PS Whit this code when i click menù only reveal!

Sudharsan S · Answer 1 · 2015-05-26T14:10:33.773

You didn't wrote coded for reset animation. That why it move only one time here i reset the animation if the class exist moved. please look and let me know if you have any issues.

$("#bars").click(function (){
           var move;
           if(!$(".nav-default").hasClass('moved')){
               var move = 0;
               $(".nav-default").addClass('moved');
           }
           else{
                var move = "-100%";
                $(".nav-default").removeClass('moved');      
            }
             $(".nav-default").animate({
               left: move
           }, 1000);
 });

Fiddle

score 1 · Accepted Answer · answered May 26 '15 at 13:40

I would recommend using CSS transitions and adding a class to denote the menu is active.

Here's the jsfiddle of the below code: http://jsfiddle.net/975va7qv/

HTML stays the same:

<div class="container">   
   <a id="bars" href="#">Apri/Chiudi Menù</a>
</div>

<nav id="nav" class="nav-default">
    <ul>
       <li>Home</li>
       <li>Servizi</li>
       <li>Portfolio</li>
       <li>Contatti</li>
    </ul>
</nav>

CSS - added new class for when the menu is open. Added a transition to the left property to give it a smooth transition.

#bars {
   position: fixed;
   z-index: 2;
}

#nav {
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
}

#nav ul {
   list-style: none;
}

.nav-default {
    left: -100%;
    top:0;
    background: #ccc;
    transition: left .5s ease;
}

.nav-default.is-open {
    left: 0
}

JQuery

$(document).ready(function() {
    var nav = $('.nav-default'),
        bar = $('#bars');

    bar.click(function (){
        // Check to see if the nav is open
        if (nav.hasClass('is-open')) {
            // If it is, close it
            nav.removeClass('is-open');
        } else {
            // Nav is closed - open it up
            nav.addClass('is-open');
        }
    });    
});

score 0 · Answer 3 · answered May 26 '15 at 13:40

Make use of a flag to set/revert animation.

var flag=0; //Initial value to 0
$(document).ready(function() {
   $("#bars").click(
       function (){
           if(flag==0) //Check here
           $(".nav-default").animate({
               left: "0"
           }, 1000, function() {
               flag=1; 
           });
           else
               $(".nav-default").animate({
               left: "-100%"
           }, 1000, function() {
               flag=0;
           });
       });    
});

Fiddle here.

jQuery, reveal/hide absolute div on click

3 Answers3