The mobile menu pop-up is malfunctioning

Encountering some challenges with the mobile menu on a website. The opening and closing animation of the background is functioning correctly, displaying the information as intended. However, when testing and clicking on one of the links, the animation simply closes without any further action. Additionally, struggling to get the close animation of the text to work properly.

I have included the codepen link for just the menu below.

  <div class="circle"></div>
    <div class="menu">
    <ul>
    <li><a href="turf-home.html">Products</a></li>
    <li><a href="turf-about-us.html">About Us</a></li>
    <li><a href="turf-contact-us.html">Get In Contact</a></li>
    <li><a class="golf" href="golf-home.html">Home</a></li>
    </div>

    <div class="burger">
    <div class="x"></div>
    <div class="y"></div>
    <div class="z"></div>
    </div>
    <div class="menu-circle">
    </div>

... (the rest of the HTML content remains the same)
javascripthtmlcssweb

Answer №1

I've formatted it this way for better visibility to others. It seems that the links are not functioning as expected due to the following code snippet:

$("div.menu ul li a").on(click, function(e) {
    e.preventDefault();
    closeMenu();
});

This code is preventing the click action from navigating to a new page. Can you clarify what should happen when the links are clicked?

Edit: I have updated the code so that now the menu closes before redirecting to the link.

if ("ontouchstart" in window) {
  var click = "touchstart";
} else {
  var click = "click";
}

$("div.burger").on(click, function() {
  if (!$(this).hasClass("open")) {
    openMenu();
  } else {
    closeMenu();
  }
});

$("div.menu ul li a").on(click, function(e) {
  e.preventDefault();
  closeMenu();
  setTimeout(function() {
  window.location.href = $(this).attr('href');
}, 2000);
});

function openMenu() {
  $("div.circle").addClass("expand");

  $("div.burger").addClass("open");
  $("div.x, div.y, div.z").addClass("collapse");
  $(".menu li").addClass("animate");

  setTimeout(function() {
    $("div.y").hide();
    $("div.x").addClass("rotate30");
    $("div.z").addClass("rotate150");
  }, 70);
  // Additional menu animations
}

function closeMenu() {
  // Close menu functionality
}
// CSS styles related to pop-up menu animation
// More CSS definitions...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML structure for the navigation menu -->

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

Individual Ajax data

Starting out with javascript, I'm a bit unsure of how to tackle this task. Essentially, I am looking to implement a for loop within the ajax data call, rather than listing each item manually. jQuery(document).ready(function() { ...

javascriptajaxfor-loop

Convert several XML nodes to display in an HTML format

I am currently facing an issue where I am trying to display all the nodes of a specific tag in XML. Although it does filter the data correctly, only one node is showing up. Is there anyone who can assist me with this problem? Below is the XML content: < ...

javascripthtmlxmlajax

Text cannot be aligned

I recently encountered an issue where I center-aligned some text and positioned it using top:20%. Everything was working fine until I added a paragraph under it. At that point, the element moved back to its original position and the top:20% positioning did ...

htmlcssweb

What is the method for incorporating variables into a Javascript prototype to enhance an object?

I've been attempting to search for something, but it seems my descriptions are not yielding any results. Here is what I am trying to achieve: XS.prototype.Abc=function $Def(a,c){ ... } However, I would like XS, ABC, and $Def to be dynamic varia ...

javascript

Is it possible to use HTML elements to trigger actions in order to display or conceal divs using JavaScript?

Beginner - I am currently working on a webpage using TinyMCE wysiwyg and I would like to implement a functionality where I can display or hide certain divs upon clicking a link/button. Unfortunately, due to the structure of the page, it seems that I ca ...

javascripthtmlcss

What is the best way to serialize data from non-form elements and make it easily accessible through params[:model]?

I have developed a unique Sinatra application that leverages an external API to load data and exhibit it on a page. Utilizing Sinatra, the information is retrieved and stored in a temporary model instance (which is NOT saved) for seamless access to all its ...

javascriptjqueryhtmlsinatra

The current_time() function displayed an incorrect time value

When I utilized the current_time() function in PHP to retrieve the current time, it displayed an incorrect time. Instead of the correct time, it is showing 12 hours and 30 minutes earlier than the actual current time, even after modifying the php.ini file ...

phphtmlmysql

Universal - Permissible data types for function and constructor arguments

In many statically typed languages, it is common to specify a single type for a function or constructor parameter. For example: function greet(name: string) { ... } greet("Alice") // works greet(42) // error TypeScript is an extension of JavaScri ...

javascriptc#typescriptkotlinlanguage-agnostic

How to perfectly align a full-width div with a div of specific width

Consider this scenario: .d1 { width: 100px; float: left; } .d2 { width: auto; float: left; } <div class="d1">Fixed Content</div> <div class="d2">This content should expand to fill the rest of the page vertically.</div> This setu ...

csshtml

What is the best way to incorporate a variable in the find() method to search for similar matches?

I've been working on a dictionary web application and now I'm in the process of developing a search engine. My goal is to allow users to enter part of a word and receive all similar matches. For instance, if they type "ava", they should get back ...

javascriptnode.jsexpressmongoose

Duplicate table row and insert new cell

I am currently attempting to duplicate a row from one table into a new table and then include an additional td at the end of the copied row containing a delete button. Thus far, I have successfully duplicated the row but am struggling to find a method for ...

jqueryhtmlcss

Unveil the Expressjs middleware within the API Client

I am currently developing a Nodejs API Client with the following simple form: //client.js function Client (appId, token) { if (!(this instanceof Client)) { return new Client(appId, token); } this._appId = appId; this._token = tok ...

javascriptnode.jsexpress

"Troubleshooting why React fails to update an array state

When I click the update name button, the state is not changing properly using setState. I want to update the persons variable and have it reflect in the DOM as well. Any ideas on how to achieve this? App.js import React, { Component } from "react"; impo ...

javascriptreactjs

Is there a way for the window.onbeforeunload event to wait for an ongoing animation to finish

Exploring the JavaScript code below which utilizes an animation library (such as scriptaculous). window.onbeforeunload = function(event) { document.body.fade(); } When leaving the page, the animation does not finish before the page changes. This raise ...

javascriptmultithreadinganimationdom-eventsscriptaculous

The focus of the input is lost when the value is being edited, specifically in the case where ngFor and ng

I'm facing an issue with a simple list that binds two-way to a parameter hero in my hero.component.ts. Whenever I begin typing in the input field, it seems to lose focus and I have to click on it again. How can I ensure that users are able to edit th ...

javascripthtmlangularangular5

The method defined in the external script for React is not recognized

For my React project, I am trying to import BlotterJS. In order to do so, I have added the following script in my index.html file: <script crossorigin src="https://rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script> Wit ...

javascriptreactjs

How can you center popup windows launched from the main window using jquery?

Within my web application, I frequently utilize popup windows that open at different locations on the screen. These popups are standard windows created with window.open() rather than using Jquery. Now, I am seeking a solution to automatically center all p ...

javascriptjqueryhtmlgenericspopup

Internet Explorer often fails to interpret html tags correctly

A strange issue is occurring with Internet Explorer on a website, where it seems to be misinterpreting the code. Instead of reading <tag></tag>bla bla</tag><//tag>, it shows something completely off. An example of this problem can b ...

csshtmlinternet-explorer

Steps for making a toggle button with Bootstrap

Initially, I developed a web application using HTML, CSS, and JavaScript. Later on, I was requested to recreate it using Bootstrap as well. While I managed to complete the task successfully, I encountered an issue where toggle buttons in the web app revert ...

javascriptjquerycsstwitter-bootstrapjqtouch

Listing pages with a title attribute and custom order

I came across a tutorial on this website that showed how to add a custom function called "mytheme_list_pages" to the functions.php file in order to include a title attribute in a link. Although it successfully adds the title attribute to the "href" output, ...

phphtmlwordpress