Tap the mobile menu button twice to toggle the menu

Incorporating: Visual Studio 2013, ASP.NET (VB) Webforms.

Upgrading an existing WebForms website from .NET 2.0 to .NET 4.5 and implementing mobile-friendly features for better Google support.

I have added a button to the top right corner as follows:

<a href="#" onclick="toggleMenuDiv();">
    <img class="headerimg-r" src="/images/MenuBtn6464.png" />
</a>

The associated JavaScript function is shown below:

function toggleMenuDiv() {
    var menu = document.getElementById('menu');
    if (menu.style.display == 'none') {
        menu.style.display = 'block';
    }
    else {
        menu.style.display = 'none';
    }
}

The HTML element with id "menu" is defined as follows:

<div class="dropdownmenu" id="menu">

However, it seems that I need to tap on the button twice to drop down the menu instead of just once. All the menu links are functioning properly with single taps.

Feel free to test it out yourself. Visit from a mobile device and give it a try.

I feel like I might be overlooking something simple; could someone please guide me in the right direction?

Thank you!

javascripthtmlcss

Answer №1

Could it be that the initial value of menu.style.display is not set to none?

Therefore, when you click the menu for the first time, you are changing the display to none. Subsequently, on the second click, the display is already none, which is why it works at that point!

I suggest verifying if the display is not equal to block, and then setting it to block!

Here's a revised solution:

if (menu.style.display != 'block') {
    menu.style.display = 'block';
}
else {
    menu.style.display = 'none';
}

UPDATE Take a look at @Billy Purvis' response as well. You can consider using .toggle() instead of .show() if you prefer to toggle the visibility of the menu.

Answer №2

The issue lies in the div element with an id of "menu" not having the style attribute set to display: none;. This means that on the first click, your code assigns that value to the element, and then on the second click, it changes the value to display: block.

Here is the relevant snippet from the linked page:

<div class="dropdownmenu" id="menu">

It should actually be:

<div class="dropdownmenu" id="menu" style="display: none;">

Answer №3

Here is a demonstration using jQuery in a jsFiddle. The code is simplified and easier to comprehend, requiring just one click to execute. I couldn't replicate your specific code without additional information, so I decided to provide an example that illustrates the logic. You should be able to adapt this logic to your own scenario. 

$("button").click(function(){
    $(".menu").show();
});

By clicking on the button (or equivalent tag), the menu will be displayed. This CSS property for the menu ensures it remains hidden until necessary.

.menu {
    display: none;
}

Click here for the live demo on jsFiddle

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

Using radio buttons and a price slider, a unique jQuery filter for products can be

I have successfully implemented basic functionality to filter products based on price (slider) and radio boxes. However, the current filter system uses OR logic, but I need it to use AND instead. For instance, I want to find a product that is from Brand1, ...

javascriptjqueryfilterproduct

tsc and ts-node are disregarding the noImplicitAny setting

In my NodeJS project, I have @types/node, ts-node, and typescript installed as dev dependencies. In the tsconfig.json file, "noImplicitAny": true is set. There are three scripts in the package.json file: "start": "npm run build &am ...

javascriptnode.jstypescript

Error message: Please provide an expression with const in React JS component

Can you assist me with this issue? I am trying to determine if the user is registered. If they are registered, I want to display the home URL, and if they are not registered, I want to display the registration URL. To do this, I am checking the saved dat ...

javascriptreactjscomponents

What is the best way to convert modal window functionality from jQuery to native Javascript?

How can I convert this jQuery code for modal windows into native JavaScript while using data attributes? I am having trouble integrating forEach and getAttribute in my code. I usually rely on jQuery, but now I need to switch to native JavaScript. I apprec ...

javascriptjquerypopup

capture the alteration of text within an input field

Currently, I am utilizing the Joomla calendar feature to select a date. The HTML code for this functionality is displayed below. When you click on the image, a calendar will pop up allowing you to choose a date. Once selected, the popup closes and the date ...

javascriptjqueryjoomla

What could be the reason that step 3 of the AngularJS Tutorial is not functioning correctly?

During Step 3 of the AngularJS Tutorial, an additional e2e test is recommended to enhance the example: it('should display the current filter value within an element with id "status"', function() { expect(element('#status').text() ...

javascriptangularjsjasminefrontend

Tips to successfully save and retrieve a state from storage

I've encountered a challenge while working on my Angular 14 and Ionic 6 app. I want to implement a "Welcome" screen that only appears the first time a user opens the app, and never again after that. I'm struggling to figure out how to save the s ...

javascriptangulartypescriptionic-framework

Testing Vue with Jest - Unable to test the window.scrollTo function

Is there a way to improve test coverage for a simple scroll to element function using getBoundingClientRect and window.scrollTo? Currently, the Jest tests only provide 100% branch coverage, with all other areas at 0. Function that needs testing: export de ...

javascriptvue.jsjestjs

Get the JSON file from Firebase storage

My query boils down to this: Within my vue.js application, I am uploading a json file to a firebase storage bucket. However, when attempting to download the file for use within the app, I encounter an "Uncaught (in promise) undefined" error. The goal is t ...

javascriptfirebasevue.jsgoogle-cloud-storage

Utilizing PHP loops to dynamically generate Bootstrap rows with specific column configurations for elements

My goal is to design a front-end layout using a PHP loop along with Twitter Bootstrap's 12 column grid system: https://i.sstatic.net/nvFC6.jpg This is the HTML output: <div class="row"> <div class="col-lg-4"> Content... ...

phphtmlwordpressloopstwitter-bootstrap-3

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

javascripthtmlcssmicrosoft-edge

Fetching data from a database for Vue.js using the Summernote editor

I previously inquired about integrating summernote with vue.js and received a helpful response here. It worked seamlessly with v-model binding. However, I encountered an issue when attempting to load data from the database for an edit page. The data was n ...

javascriptvue.jsvuejs2

What could be causing the video to extend beyond the limits of the container?

When extending the result window, the video ends up overlapping the section below it. I am looking to keep the video within the confines of the section's height, which is set to height:100vh. Is there a way to accomplish this? Check out this jsFiddl ...

htmlcss

What is the process for incorporating a compiled JavaScript library into a TypeScript project?

In my Typescript project (ProjectA), I am utilizing several node packages. Additionally, I have a babel project (ProjectB) with a build configuration that supports output for multiple module definition standards such as amd, common.js, and esm. My questio ...

javascripttypescriptbabeljs

Creating a sleek navigation menu using Bootstrap 4

Currently tackling the Vertical Navigation bar which can be found at this location: Codeply This is my code snippet: <html> <body> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > ...

cssbootstrap-4

Using Lightmaps with Three.js

Is it true that lightmaps function independently of other textures? It seems like I need to establish a second set of UVs. I've exported my JSON object with a second set of UVs and included the following code snippet: geometry.faceVertexUvs[0] = ge ...

javascriptthree.js

Developing instance members and methods in JavaScript

After encountering a challenge with creating "private" instance variables in JavaScript, I stumbled upon this discussion. Prior to posing my question, I wanted to provide a thorough overview of the problem. My goal is to showcase a complete example of corr ...

javascriptvariablesprototypeinstanceprivate

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

htmlcsshtml-lists

The button fails to function properly after loading a partial view using AJAX

Having an issue with my page that contains two buttons - Next and Previous. These buttons are supposed to load a table in a PartialView. The problem arises when I press the button for the second time, it doesn't work as expected. Below is the code sn ...

htmlajaxasp.net-mvcasp.net-mvc-4partial-views

Steps to show submenus upon hovering over the main menu items

I am trying to create a vertical menu with multiple levels using HTML and CSS. Here is the code I have written so far: <ul> <li>Level 1 menu <ul> <li>Level 2 item</li> <li>Level 2 item</li&g ...

javascripthtmlcss