Show or hide a fixed position div using jQuery when clicked

Question

Show or hide a fixed position div using jQuery when clicked

I am new to jQuery and I am trying to create a "full page menu" on my own. However, I am struggling to hide the menu on the second click. I tried using .toggle() but I found out that it has been deprecated. Can someone assist me with this? Thank you so much and please excuse any mistakes in my English.

HTML

<div class="container">   
   <a id="bars" href="#">Open/Close Menu</a>
</div>

<nav id="nav" class="nav-default">
    <ul>
       <li>Home</li>
       <li>Services</li>
       <li>Portfolio</li>
       <li>Contact</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.
           });
       });    
});

Note: When I click the menu with this code, it only reveals!

javascript jquery html css hide

Answer 1

Answer №1

The code for reset animation was missing, causing the animation to only move once. I added a check to reset the animation if the class "moved" exists. Take a look and let me know if you encounter 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

Answer 2

The code for reset animation was missing, causing the animation to only move once. I added a check to reset the animation if the class "moved" exists. Take a look and let me know if you encounter 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

Answer 3

Answer №2

If you want to create a smooth transition for your menu, I suggest using CSS transitions along with adding a class to indicate when the menu is active.

You can check out the jsfiddle link for the code example: http://jsfiddle.net/975va7qv/

The HTML structure remains unchanged:

<div class="container">   
   <a id="bars" href="#">Toggle Menu</a>
</div>

<nav id="nav" class="nav-default">
    <ul>
       <li>Home</li>
       <li>Services</li>
       <li>Portfolio</li>
       <li>Contact</li>
    </ul>
</nav>

In the CSS section below, a new class is added for an open menu state, including a transition on the left property for a smoother effect.

#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
}

For JQuery implementation:

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

    bar.click(function (){
        // Check if the nav is currently open
        if (nav.hasClass('is-open')) {
            // Close the nav
            nav.removeClass('is-open');
        } else {
            // Open the nav
            nav.addClass('is-open');
        }
    });    
});

Answer 4

If you want to create a smooth transition for your menu, I suggest using CSS transitions along with adding a class to indicate when the menu is active.

You can check out the jsfiddle link for the code example: http://jsfiddle.net/975va7qv/

The HTML structure remains unchanged:

<div class="container">   
   <a id="bars" href="#">Toggle Menu</a>
</div>

<nav id="nav" class="nav-default">
    <ul>
       <li>Home</li>
       <li>Services</li>
       <li>Portfolio</li>
       <li>Contact</li>
    </ul>
</nav>

In the CSS section below, a new class is added for an open menu state, including a transition on the left property for a smoother effect.

#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
}

For JQuery implementation:

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

    bar.click(function (){
        // Check if the nav is currently open
        if (nav.hasClass('is-open')) {
            // Close the nav
            nav.removeClass('is-open');
        } else {
            // Open the nav
            nav.addClass('is-open');
        }
    });    
});

Answer 5

Answer №3

Utilize a flag to control the animation.

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

View the Fiddle here.

Answer 6

Utilize a flag to control the animation.

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

View the Fiddle here.

Show or hide a fixed position div using jQuery when clicked

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to convert exponential values to decimals when parsing JSON data?

The issue of the keyboard disappearing on Chrome for Android while switching between different input

The height of the Material UI dropdown is displaying in an improper manner

Combine theme configuration options within Material-UI

Sending Information within Controllers with AngularJS

The Eclipse Phonegap framework is experiencing difficulty in loading an external string file with the jquery .load function

Trigger an action in the clean-up function of useEffect

The case of the elusive Firefox overflow: hidden glitch

Are `<text>` nodes unable to utilize ligature fonts in CSS/SVG?

Discover the art of implementing linear gradient backgrounds in Tailwind css effortlessly

Guide on creating an autonomous select-all checkbox to show table columns

Disable the full screen camera mode on iOS browsers while live streaming camera video

Is it possible to apply a CSS Transition to just one specific type of transform?

Issues with applying different styles in a React Component based on prop values are hindering the desired outcome

What is the method for transferring AJAX response data to PHP variables?

Comparing currency to double in handlebars: a comprehensive guide

Can AdonisJS 4.1.0 support conditional queries?

Guide to incorporating vertical scrolling for a grid of items in Material UI

The console is displaying the array, but it is not being rendered in HTML format in AngularJS

What is the best way to start tiny-slider automatically once the video has ended?