Animation glitch when clicking on hamburger menu symbol

I am facing an issue where, in mobile window mode, if I click on the burger icon and then zoom out to a larger resolution and zoom back in to mobile size, clicking on the burger icon does not activate the slide-down menu as expected.

You can see the issue in action here: http://jsfiddle.net/3n0zL27x/1/ Any help on this matter would be greatly appreciated!

  /// create a list and append to mobilemenu
var $select = $("<ul></ul>");

$("#mobileMenu").append($select);

////  Get each element in the menu li

$( "#menu li" ).each(function(){
//SELECTING ELEMENT RELATED TO THE FUNCTION
    var $anchor = $(this);
    // SELECTING THE LIST IN FUTURE THE MENU
var $li = $("<li></li>"); 
    // ADDING TEXT FROM EACH ANCHOR TO THE LIST
  $li.text($anchor.text());
    /// ADDing the list item to the unorderd list
    $select.append($li);
});


var isclicked = false;
// USER CLICKING ON THE BURGER AND ACTIVATEING THE MENU
$(".burger").click(function(event){
 event.preventDefault();
$(this).toggleClass('active');
/// IF THE BURGER MENU IS CLICKED FADE OUT THE LIST ITEMS AND SCROLL UP THE BACKGROUND
if (isclicked === true) {   
$("#menu").animate({
    height: "80px",
  }, 1500 );
    $("#mobileMenu li").fadeOut(1000);

isclicked = false;       
}
/// IF THE BURGER MENU IS NOT CLICKED SLIDE DOWN THE BACKGROUND AND FADE IN THE LIST ITEMS    
else {

$("#menu").animate({
    height: "150px",
  }, 1500 );
$("#mobileMenu li").css({
      padding: "5px 0px",
    color: "white"
    });    
$("#mobileMenu li").fadeIn(3500 );  
isclicked = true;
/// IF USER RESIZES THE PAGE REMOVE THE MENU
    $( window ).resize(function() {
    $("#mobileMenu li").css({
      display: "none",
    });

    $("#menu").css({
      height: "80px",
    });
        // SET BURGER STATE TO NOT ACTIVATED
    $(".burger").removeClass('active');
});       
}});

Answer №1

To ensure proper functionality, remember to reset the isClicked variable to false within the resize event handler:

 // If user resizes the page, hide the menu
$( window ).resize(function() {
    $("#mobileMenu li").css({
      display: "none",
    });

    $("#menu").css({
      height: "80px",
    });
    // Reset burger state to non-activated
    $(".burger").removeClass('active');
    isClicked = false;       
 });       
}});

Check out this Fiddle for reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered a network error: A rogue token < was found in JSON at position 0 within a new Apollo

https://i.sstatic.net/D25ai.png const httpLink = createHttpLink({ uri: 'http://localhost:3090/' }) const client = new ApolloClient({ link: httpLink, cache: new InMemoryCache() }) client.query({ query: gql` query users { ...

What is the most effective method for incorporating a floating section next to a Susy gallery?

Check out my latest progress on the codepen here The number of items displayed in the gallery is dynamic based on search results. However, I am looking to add a fixed area to the right side that remains visible as the user scrolls through the gallery. Ess ...

The li elements in a horizontal menu all have equal spacing between them, filling the width of the ul

I designed a horizontal menu navigation system using HTML elements ul for the main menu container and li for menu list items. The layout is structured with display table for ul and table-cell for li. However, I encountered an issue where there are inconsis ...

Can you choose an option from a dropdown menu without relying on jQuery?

Can a dropdown list item be selected using AngularJS instead of jQuery? I have successfully accomplished this using jQuery, but I am curious if it can be done with AngularJS. This is how I achieved it using jQuery: var dropdownlist = $("select").data("k ...

Is it possible to incorporate pre-written HTML code into ASP.NET?

Is there a method to transform an HTML template into ASP.NET? I am attempting to convert a website template, which includes Javascript and CSS files, from HTML to ASP.NET in order to establish a connection with a SQL Server database. I have minimal coding ...

Can the width of an offcanvas panel be adjusted?

Currently implementing the offcanvas component in my project, but I'm looking to make the panel wider than the standard size. Specifically, I want it to be 35% width. I've attempted to utilize the panelClass NgbOffcanvasOptions property, however, ...

Transfer a specific row from a dataTable to another dataTable on a separate php page

Within my programming project, I am working with two tables: table1.php and table2.php In my current setup, I have a script located in table1.php that allows me to pass data to a modal which then passes the data into table2.php. However, I am now facing a ...

When clicking the button, the service function is not properly updating the view

Upon calling this.getLeaderboard(); in the ngOnInit() function within leaderboard.component.ts, the leaderboard is only displayed on page load or refresh, which is expected. However, I also want to retrieve and display the leaderboard upon clicking a butto ...

There seems to be an issue with the useReducer value not updating when logging it in a handleSubmit function

I'm currently incorporating useReducer into my Login and Register form. Interestingly, when I attempt to log the reducer value, it only displays the default value. However, if I log it within the useEffect hook, it functions correctly. Below is a sn ...

Create a JavaScript and jQuery script that will conceal specific div elements when a user clicks on them

Within my navigation div, there exists another div called login. Through the use of JavaScript, I have implemented a functionality that reveals additional divs such as login_name_field, login_pw_field, register_btn, do_login_btn, and hide_login upon clicki ...

Fixing Typescript assignment error: "Error parsing module"

Trying to assign an object to the variable initialState, where the type of selectedActivity is Activity | undefined. After using the Nullish Coalescing operator (??), the type of emptyActivity becomes Activity. However, upon execution of this line, an err ...

Express.js refuses to serve static assets

I've been struggling to set up my express server to serve static files, but no matter what I try, I can't seem to get it working. I've attempted various solutions without success. Here is my folder structure: App - Web -- public --- images ...

Challenge with the submission event listener

I am struggling to create my first event listener for the submit button that should respond to both a click and an enter key press. Currently, it is not working for either event, and I am unsure why. I do not intend to send any data to another page; I simp ...

Creating JSON data that is completely valid using client-side JavaScript

I've been working on creating a JSON explorer/editor. Successfully managed to parse the initial JSON into the div and customize the formatting. Here's the function I utilize to loop through the initial JSON: _iterate(_tab, raw_json){ var tab ...

Utilize JavaScript or JQuery to create a dynamic pop-up window that appears seamlessly on the

Looking to create a unique feature on an HTML page? Want a clickable link that opens a "pop-up" displaying a specific image, right within the page rather than in a new tab or window? Ideally, this pop-up should be movable around the page like a separate ...

Tips for deleting all content within a designated html tag (including the tag itself)

Imagine you are dealing with a string like this: text = """<p>Bla bla bla.</p><p>Blo blo blo<a href="http://www.example.com">bli bli</a>.</p><p>blu blu<br> <span style="font-size: x-small;"><br> ...

The flow of events is not hindered by an if statement, even when the code within it is executed

I'm facing an issue where the console.log statement keeps executing even after calling the search function within the "if statements" in my code. Is there a way to prevent this from happening? function search() { /** * The Tweet checking algori ...

What is the proper way to include a parameter in an ASP onclick function within a table row?

Below is a table row declared within a listview: <tr onclick="<%= _jsPostBackCall %>;" /> When calling a postback method on the backend, I need to retrieve the tr index: public void RaisePostBackEvent(string eventArgument) { ...

Tips for showcasing the latter portion of text within an HTML select dropdown menu

I have a select drop-down list with a fixed width of 80px, as shown in the image below: https://i.sstatic.net/pCpI9.png <select id="dd_country_code_2" name="dd_country_code_2" style="width: 120px; height: 23px;"> <option value="SEL">(Cou ...

Setting up Quill in a Nuxt project (a VUE component)

I'm struggling to remove the toolbar in Quill despite my efforts. This is the HTML snippet I am working with: <template> <quill v-model="content" :config="config"></quill> </template Here's what I have inside the scri ...