Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button to reveal a drop-down list, select the desired page, and then click the menu button again to close the drop-down list. If not closed, the list covers the entire screen, making it impossible to view the selected page.

You can see how it looks in this screenshot: https://i.stack.imgur.com/bSk9b.jpg

Is there a way to automatically close the menu when selecting an item from the drop-down list? Any tips or suggestions on how to achieve this would be greatly appreciated as I'm currently struggling to find a solution.

javascripthtmlcssmobile

Answer №1

To activate a click event on any item within the menu lists, simply click on that particular item. For instance... If you're utilizing jQuery

$('list-item').click(function() {
    //Get rid of the class responsible for keeping the menu open
    //Execute any necessary actions following the button click
    //such as navigating to another page 
});

This can also be achieved using vanilla javascript. Just look up click events in javascript.

Answer №2

Implement JavaScript on the click action of any link in the navigation menu to toggle its visibility.

> <a href>'s

This will allow users to easily show or hide the menu by clicking on any link within it.

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

What is the best method to verify chrome.runtime.onInstalled in Chrome extension testing?

Is there a way to test the chrome.runtime.onInstalled handler? I am developing a Chrome extension that utilizes chrome storage to store specific data. In my upcoming release, I plan on making changes to the data model in chrome storage. To do this effectiv ...

javascriptgoogle-chromegoogle-chrome-extension

Tips for updating border color when focused with styled-components

How can I change the border color of an input on focus using styled-components and React? Here is the code snippet I am currently using: import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; const String ...

javascriptcssreactjsstyled-components

Ensure to verify the input's value by clicking the button

Upon clicking a button, I am trying to determine if there is any content in an input field. However, it seems that the check only happens once when the website first loads. Subsequent clicks of the button do not detect any new input values entered into the ...

javascriptjqueryhtml

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...

javascriptcssangulartypescriptangular-material

Rect cannot be resized using mouse events

I am currently working on resizing the rectangle inside the SVG using mouse events. To achieve this, I have created another circle shape at the right bottom edge of the rectangle and implemented resize events on that shape. However, I'm facing an issu ...

javascriptreactjstypescriptsvgevent-handling

Hold off on submitting the form until the location has been obtained

I am facing an issue with my application where it tries to retrieve location settings from the browser, which takes some time. I would like this process to run when the page loads so that the data is available when needed. However, if a user clicks the s ...

javascriptjquerygeolocationjquery-callback

Using sl-vue-tree with vue-cli3.1 on internet explorer 11

Hello, I am a Japanese individual and my proficiency in English is lacking, so please bear with me. Currently, I am using vue-cli3.1 and I am looking to incorporate the sl-vue-tree module into my project for compatibility with ie11. The documentation menti ...

javascripttypescriptvue.jsecmascript-6babel-polyfill

Express Angular Node Template Render throwing an error: module 'html' not found

I am currently in the process of creating a web application using AngularJS with ui-router for routing via $stateProvider, ensuring that only the specified states are displayed in the ui-view. In my server.js file, I have set up an initial framework such ...

javascriptangularjsnode.jsexpress

AngularJS Component enthusiasts

While going through a tutorial on the Angular UI Router GitHub page (link: https://github.com/angular-ui/ui-router), I came across an intriguing code snippet: var myApp = angular.module('myApp', ['ui.router']); // For Component users, ...

javascriptangularjsangular-ui-router

Troubleshooting: My Bootstrap collapse navbar refuses to cooperate

Hi there! I'm working on creating a responsive navbar with Bootstrap, but I'm having trouble getting the collapse feature to work. Can someone please assist me? Here are the lines of code I have: <nav class="navbar navbar-expand-md navba ...

htmlbootstrap-4

The functionality of AngularJS ng-model seems to be disrupted when it is set within a directive

Is it possible to automatically generate the ng-model of an input based on the name of the input itself? This requirement arises from using Html.TextBoxFor in MVC, which creates the necessary name for binding the input to the server-side model. To streamli ...

javascriptangularjsasp.net-mvcrazor

Having issue updating a MySQL table using an array of objects in JavaScript

Working on a personal project involving React.js for the front-end, Node.js/express for the back-end, and mySQL for the database. The current array is as follows: horaires = [ { jour: 'Lundi', horaire: 'Fermé' }, { jour: 'Mar ...

javascriptmysqlnode.jsexpress

Utilizing AngularJs to differentiate between arrays and strings within an HTML template

I'm currently facing a challenge with creating a dynamic HTML template. In order to present data in a table, I need to distinguish between a regular String and an Array. Firstly, the HTML template is embedded within another template using the data-ng- ...

javascriptjqueryhtmlangularjsarrays

In the Redux framework, the reducer fails to identify the action object

I'm currently working on a React project using Redux. I've encountered an issue where my reducer is not recognizing the action type being sent to it, or even the action itself. The error message I am receiving is TypeError: Cannot read property & ...

javascriptreactjsreduxreact-redux

The Python Django site is failing to detect and implement CSS updates

Currently, I am in the process of developing a Django website where I have successfully loaded my CSS and HTML files as static resources. In this project, I am utilizing two CSS files: one for Bootstrap and another for my custom styling. However, I encoun ...

pythonhtmlcssdjango

What is the best way to conceal certain choices in a dropdown menu?

How can I display only the cities in Australia in a dropdown list? I have tried to find "Australia" in the options and hide everything before and after it, but I have been unsuccessful! Here is my fiddle. <select class="dropdown" id="dropdown"> ...

javascriptjqueryhtml

Transform the appearance of buttons within AppBar using Material UI React

Embarking on a new project using React and Node JS has led me into the battle with Material UI. My current challenge is customizing the style of AppBar items, particularly the Buttons. Here's what I have in my "Menu" component: const Menu = () => ...

javascriptreactjsmaterial-ui

SonarLint versus SonarTS: A Comparison of Code Quality Tools

I'm feeling pretty lost when it comes to understanding the difference between SonarLint and SonarTS. I've been using SonarLint in Visual Studio, but now my client wants me to switch to the SonarTS plugin. SonarLint is for analyzing overall pr ...

javascriptangulartypescriptsonarqubesonarlint

Creating Secure JWT Tokens

Hello there! I'm currently in need of assistance with generating JWT tokens that include three headers: alg, kid, and typ. The format I am looking for is as follows: { "alg": "RS256", "kid": "vpaas-magic-cookie-1 ...

javascriptjwtjitsijitsi-meet

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

First time poster =) I am currently facing an issue while trying to print a long table and have the table header repeat on each page. The problem arises when the height of the <thead> reaches a certain threshold, specifically 242px in Chrome 87.0.42 ...

htmlcssgoogle-chrome