When I click on the anchor element, I wish for the navigation to be concealed

Question

When I click on the anchor element, I wish for the navigation to be concealed

I am facing an issue with my navigation bar. It is functioning properly, but I am unable to activate the :active pseudo-class for the anchor tags when clicked. Here is my HTML and CSS code along with what I am trying to achieve...

Below is the HTML section of my navigation:

<div class="navigation">
      <input type="checkbox" class="navigation__checkbox" id="navi-toggle">

      <label for="navi-toggle" class="navigation__button">
        <span class="navigation__icon">&nbsp;</span>
      </label>

      <div id="background" class="navigation__background">&nbsp;</div>

      <nav class="navigation__nav">
        <ul class="navigation__list">
          <li class="navigation__item"><a href="#" class="navigation__link">About Me</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link">Skills</a></li>
          <li class="navigation__item"><a href="#projects" class="navigation__link">Projects</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link">Contact Me</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link">Message Me</a></li>
        </ul>
      </nav>

    </div>

On clicking the hamburger button, the navigation expands. Clicking it again collapses the navigation. This behavior can be seen in the following SASS/CSS snippet:

.navigation {
  .navigation__checkbox {
    display: none;
  }

  // More CSS properties...

}

My objective is to replicate this functionality for the anchor tags within the navigation menu. I attempted to implement a similar approach without success. Any suggestions on how to achieve this would be greatly appreciated. Thank you.

If interested, please see the webpage for a better understanding of the issue at hand.

html css navigation

Answer 1

Answer №1

Utilize pure vanilla javascript for this task

1) Locate and gather all menu links on the page

const menuLinks = document.querySelectorAll('.navigation__link');

2) Attach a click event listener to each link, and update checkbox state to unchecked upon click

menuLinks.forEach(link => { 
   link.addEventListener("click", () => { 
     document.querySelector('.navigation__checkbox').checked = false
   })
})

Answer 2

Utilize pure vanilla javascript for this task

1) Locate and gather all menu links on the page

const menuLinks = document.querySelectorAll('.navigation__link');

2) Attach a click event listener to each link, and update checkbox state to unchecked upon click

menuLinks.forEach(link => { 
   link.addEventListener("click", () => { 
     document.querySelector('.navigation__checkbox').checked = false
   })
})

When I click on the anchor element, I wish for the navigation to be concealed

Answer №1

Similar questions

Modify the text inside a div based on the navigation of another div

Displaying images above a Bootstrap Carousel

Move logo and text when menu is clicked

Assign a class to a button created dynamically using Angular

Is there a way for me to have a background image behave like an img element with img-fluid class as shown in the

What is the best way to find the correct Xpath for the <li> tag in HTML?

CSS :hover activates only when the mouse is in motion

How can I incorporate a personalized SVG path to serve as a cursor on a webpage?

React components may overlap each other due to their elements intersecting

The responsiveness of cards within the carousel-inner needs improvement

What is the best way to create a hyperlink to the same page but on a separate website?

RegEx for capturing targeted content within HTML elements

"Internet Explorer naturally selects the submit button when users press the enter key to submit a

How can I implement custom color values for individual sides of the border property in tailwind-css?

What is the best way to align the 'Typography' component in the center?

Unable to assign a basic HTML class to a Blazor component

Consolidate HTML project into a unified HTML file

The `background-size` property in jQuery is not functioning as expected

Creating a responsive container in Bootstrap that adjusts height dynamically, featuring a text input box positioned at the bottom

Setting the margin to auto causes the div to be shifted out of the