Question

  • Creator
    Topic
  • #4158249

    Closing nav panel on link click?

    by rob167 ·

    I have a one page site but a full screen hamburger menu. Menu items are linked to anchors in the page. How do I get the menu to go when I click a menu item?

    HTML
    <label for=”hamburger-checkbox” class=”hamburger”>
    <div class=”hamburger-item1″></div>
    <div class=”hamburger-item2″></div>
    <div class=”hamburger-item3″></div>
    </label>

    <div class=”sidebar”>

    </div

    CSS
    .hamburger {
    z-index: 888;
    position: fixed;
    top: 15px;
    right: 20px;
    cursor: pointer;
    width: 60px;
    }

    .hamburger-item1 {
    background-color: #fff;
    width: 100%;
    height: 10px;
    margin-bottom: 8px;
    }
    .hamburger-item2 {
    background-color: #fff;
    width: 100%;
    height: 10px;
    margin-bottom: 8px;
    }

    .hamburger-item3 {
    background-color: #fff;
    width: 100%;
    height: 10px;
    margin-bottom: 8px;
    }

    .sidebar {
    position: fixed;
    top: 0;
    z-index: 880;
    right: -100%;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    background-color: #eee;
    transition: right .2s;
    }

    .sidebar ul {
    padding-left: 0;
    }

    .hamburger-checkbox:checked ~ .hamburger {
    background-color: #000;
    }

    #hamburger-checkbox:checked ~ .sidebar {
    right: 0;
    }

    #hamburger-checkbox {
    display: none;
    }

    #menu {
    text-decoration: none;
    font-family: “Barlow Semi Condensed”, sans-serif;
    line-height: 1.5;
    font-weight: 300;
    font-size: 150%;
    text-align: center;
    text-transform:

You are posting a reply to: Closing nav panel on link click?

The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to our Community FAQs for details. All submitted content is subject to our Terms of Use.

All Answers

  • Author
    Replies
    • #4159750

      Reply To: Closing nav panel on link click?

      by hazelalia972 ·

      In reply to Closing nav panel on link click?

      To make your full-screen hamburger menu close when you click a menu item, you need to add some JavaScript functionality. You can do this by updating your HTML and adding a JavaScript event listener. Here’s an example of how you can achieve this:

      HTML:
      `html
      <!– Your existing HTML code for the hamburger menu –>
      <label for=”hamburger-checkbox” class=”hamburger”>
      <div class=”hamburger-item1″></div>
      <div class=”hamburger-item2″></div>
      <div class=”hamburger-item3″></div>
      </label>

      <input type=”checkbox” id=”hamburger-checkbox”>

      <div class=”sidebar”>
      <ul>
      <li id=”text”><a href=”#business-services”>Business Services</a></li>
      <li id=”text”><a href=”#specialist-services”>Specialist Services</a></li>
      <!– Add more menu items with corresponding anchor links –>
      </ul>
      </div>
      `

      JavaScript (add this script at the end of your HTML file or in an external JavaScript file):
      `javascript
      // Get references to the menu items and the hamburger checkbox
      const menuItems = document.querySelectorAll(‘.sidebar ul li a’);
      const checkbox = document.getElementById(‘hamburger-checkbox’);

      // Add click event listeners to each menu item
      menuItems.forEach(item => {
      item.addEventListener(‘click’, () => {
      // Uncheck the hamburger checkbox to close the menu
      checkbox.checked = false;
      });
      });
      `

      With this JavaScript code, when a user clicks on a menu item (e.g., “Business Services”), the hamburger menu will close because the JavaScript event listener will uncheck the hamburger-checkbox. Make sure to replace the href values in your menu items with the corresponding anchor IDs in your page content. This way, clicking a menu item will also scroll to the relevant section on your one-page site.

      Remember to adjust your HTML structure and JavaScript code according to your specific needs and the structure of your page.

      • This reply was modified 7 months, 1 week ago by Avatar photokees_b.
    • #4167041

      To make the menu close when a menu item is clicked

      by LouisDay ·

      In reply to Closing nav panel on link click?

      You’ll need to add an event listener in JavaScript to handle the click event and close the menu accordingly. Assuming you’re using a simple anchor link setup, here’s how you can achieve this:

      // JavaScript
      const menuItems = document.querySelectorAll(‘.sidebar li’);
      const hamburgerCheckbox = document.getElementById(‘hamburger-checkbox’);

      menuItems.forEach(item => {
      item.addEventListener(‘click’, () => {
      hamburgerCheckbox.checked = false; // Close the menu when a menu item is clicked
      });
      });

      You’ll need to place this JavaScript code in your HTML file or link it from an external file. This code listens for clicks on each menu item and sets the hamburgerCheckbox (your menu checkbox) to unchecked, effectively closing the menu when a menu item is clicked. Make sure to include this after your HTML content or inside a window load event to ensure all elements are loaded before applying the event listeners.

    • #4167669

      You’ll need to add some JavaScript to handle this behavior

      by GracePerkins ·

      In reply to Closing nav panel on link click?

      You can use JavaScript to listen for the click event on menu items and then close the menu. Here’s a basic example using vanilla JavaScript:

      document.addEventListener(‘DOMContentLoaded’, function() {
      const menuItems = document.querySelectorAll(‘.sidebar li’);

      menuItems.forEach(function(item) {
      item.addEventListener(‘click’, function() {
      // Close the sidebar by removing the checked property
      const checkbox = document.getElementById(‘hamburger-checkbox’);
      checkbox.checked = false;
      });
      });
      });

      Make sure to add this script after your HTML content or within a <script> tag. This script listens for clicks on menu items and, when clicked, sets the ‘checked’ property of the hamburger checkbox to ‘false’, effectively closing the sidebar. Adjust the script according to your specific HTML structure and needs.

Viewing 2 reply threads