How can I automatically close the menu when I click on a link in Vue?

  1. Tap the menu icon
  2. Select a link
  3. The URL changes in the background.
  4. However, the menu remains open. How do I close the menu when a link is selected? The menu is wrapped in a details HTML element.

Is there a way to remove the "open" attribute from the details?

I would appreciate simple suggestions, as I am a designer with limited knowledge of JavaScript. Thank you!

Below is my code for the navigation:

    <details>
        <summary class='menu'>
          <div class='line line1'></div>
          <div class='line line2'></div>
          <div class='line line3'></div>
        </summary>
        <div class='dropdownMenu'>
          <div class='column'>
            <label>Categories</label>
            <a class='link' href='/category1'>Category 1</a>
            <a class='link' href='/category2'>Category 2</a>
            <a class='link' href='/category3'>Category 3</a>
          </div>
          <div class='column'>
            <label>Contact Us</label>
            <a class='link' href='mailto:info@example.com'>info@example.com</a>
            <a class='link' href='tel:1234567890'>(123) 456-7890</a>
          </div>
        </div>
      </details>
javascriptvue.jsvue-router

Answer №1

To enhance the functionality of your Vue Router, consider implementing a Global Navigation Guard. By using native HTML for menu control, you'll need to locate and eliminate the presence of the open attribute, which dictates the open/closed state within the <details> tag.

const router = new VueRouter()

router.beforeEach(() => {
  document.querySelector('details').removeAttribute('open')
})

Answer №2

To make things easier for yourself, consider assigning a class to all the links such as 'link closebar-remove' and include it in your JavaScript code.

The term 'show-menu' mentioned after the toggle refers to a placeholder value in your CSS. You will need to specify this value based on the CSS elements related to the appearance of menuSlide.

const closeBar = document.querySelector('.closebar-remove');
const dropMenu = document.querySelector('.menuSlide');

closeBar.addEventListener('click', function(){
    dropMenu.classList.toggle('show-menu');
});

If the dropMenu.classList.toggle method doesn't work as expected, you can try using dropMenu.classList.remove('appropriate-css-class')

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

Guide to seamlessly integrating form data into MySQL using JavaScript and HTML without redirecting the user from the current page

Having trouble inserting a new user into MySQL database? I've attempted using both jQuery and pure JavaScript, but it doesn't seem to be working. There's no response when I click on the submit button. Any ideas on what might be causing this ...

javascriptajax

What is the way to retrieve an array property in a typescript interface?

Imagine a scenario with three interfaces structured as follows: registration-pivot.ts export interface RegistrationPivot { THead: RegistrationPivotRow; TBody: RegistrationPivotRow[]; } registration-pivot-row.ts export interface RegistrationPivotR ...

javascripthtmlcssangulartypescript

What could be the reason for the malfunction of my callback function?

This particular function is executed with the command node server const express = require("express"); const app = express(); const fs = require("fs"); const connectDb = require("./config/db"); const __init__ = (local = false) => { fs.writeFile( ...

javascriptnode.js

Maintain the webpage content even after submitting a form with a file attachment on the same page

I am in the process of creating a secure webpage exclusively for our members. This page will allow members to access their personal data stored in the database and upload files as needed. One concern I have is how to return to the member page with all the ...

javascriptjqueryhtml

Regular Expression to Replace Characters Not Matching

I am struggling with a coding issue that involves manipulating a string. The original string I have is "Hello This is world This". Here is the code snippet I have tried: var patt = 'Hello This is world This' var res = patt.constructor; alert( ...

javascriptregex

Ways to implement a fixed navigation bar beneath the primary navbar using ReactJS

Utilizing ReactJS, I am endeavoring to create a secondary (smaller) navbar in the same style as Airtable's product page. My primary navbar is situated at the top and transitions from transparent to dark when scrolled. The secondary bar (highlighted in ...

javascriptreactjsmaterial-ui

Creating Vue Components indirectly through programming

My goal is to dynamically add components to a page in my Vue Single file Component by receiving component information via JSON. While this process works smoothly if the components are known in advance, I faced challenges when trying to create them dynami ...

javascriptvue.js

Is nextJS SSR the optimal solution for handling undefined variables in the window object to enable optional chaining in cases where global variables are not supported?

When using (window?.innerHeight || 420) for server-side rendering (SSR), the translation would be (((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) || 420) However, this could result in a referenceError: window is not d ...

javascriptnext.js

Exploring the documentation of node.js with doxygen

When it comes to my C projects, I make sure to document them using Doxygen. Recently, I delved into the world of NodeJs and attempted to document .js files with Doxygen, but unfortunately, no output was generated. Despite my efforts to search for answers ...

javascriptnode.jsdoxygen

Increasing a variable in MongoDB using Meteor.js based on the value of a variable in a separate document

I am facing an issue similar to this: I am struggling to modify multiple documents simultaneously. click: function() { var power = Meteor.user().power; var mult = Meteor.user().mult; Meteor.users.update({ _id: this.use ...

javascriptmongodbmeteorvar

What is the method for obtaining a dynamic route path within the pages directory in Next.js?

In my code, I have a special Layout component that compares routing queries and displays the appropriate layout based on the query. I'm looking to extend this functionality to handle dynamic routing scenarios, such as invoices/invoice-1. Currently, ...

javascriptroutesnext.js

Refresh Browser with Angular UI State Parameters

I'm seeking assistance on an issue I've encountered while using angularjs 1.5.5 and angular-ui-router 0.4.2. Specifically, when refreshing the browser, I face a problem that seems to be implementation-specific. Below is a sample code snippet of ...

javascriptangularjsangular-ui-routersingle-page-application

Trigger the click event on a specific class selector to extract the corresponding ID

I have an HTML Table with each row: <table> <tr><td><a href='#' id='1' class='delete'>delete</a></td></tr> <tr><td><a href='#' id='2' class='de ...

javascripthtml

The setting of the custom user agent in the Chrome Extension Manifest Version 3 is not functioning correctly

We currently have an extension that consists of only two files: manifest.json and background.js Despite the browser (Chrome version 112) not reporting any errors, we are facing an issue where the user agent is not being set to 'my-custom-user-agent&a ...

javascripttypescriptgoogle-chrome-extensionchromiumchrome-extension-manifest-v3

What's the best way to include CSS and Javascript in an HTML document?

I'm still getting the hang of CSS and JavaScript. I stumbled upon a cool countdown timer that I'd like to incorporate into my website, but I'm not quite sure how to place it where I envision it. Check out the timer here CSS: html,body{mar ...

javascripthtmlcss

What is the best way to send a Node.js variable to the inner part of a Pug script tag?

I am attempting to pass a variable from my Node.js backend to a Pug template and then use that variable inside a JavaScript script tag within the Pug file. Here's a snippet of my Node.js code: app.get('/profile', function (req, res) { var ...

javascriptjquerynode.jsexpresspug

AngularJS does not hide the Onsen UI modal

I am new to working with angularjs and onsen ui. I have implemented a modal in an ajax request, which is supposed to hide upon successful response. Everything seems to be working fine, except for the fact that when I navigate back to the page, the modal re ...

javascriptangularjsonsen-ui

"Prevent further button clicks by disabling it after the initial click with ActionRowBuilder in Discord.Js

Encountering a puzzling issue where I am unable to disable a button after it has been clicked. The option to disable the button does not seem to appear. When attempting to deactivate the button, I utilize the following function: const row = new ActionRowBu ...

javascriptnode.jstypescriptdiscord.js

Restricting JSON output using date and time values within the JSON object

Currently, I'm in the process of creating a play data reporting tool specifically designed for a radio station. The main concept involves retrieving play history from the playout software's API and manually adding tracks that were played outside ...

javascriptjqueryjsonajax

Error message encountered in PHP due to an undefined index

My goal is to add items from a form to a table named products. The form layout can be seen here: https://i.stack.imgur.com/f9e08.png The "Add more suppliers: +" link adds a new row to the form when clicked. The corresponding script for this action is as ...

javascriptphpsqlfor-loopmysqli