Web Development·12,110 discussions

Closing nav panel on link click?

Tags: Web development

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”>

<li id=”text”>Business Services
<li id=”text”>Specialist Services
<li id=”text”>Tax Services
<li id=”text”>IT Services
<li id=”text”>About Us
<li id=”text”>Resources
<li id=”text”>Contact Directory
<li id=”text”>Our Team

</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:

Topic

[kees_b]

Reply To: Closing nav panel on link click?

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 1 year, 3 months ago by kees_b.

To make the menu close when a menu item is clicked

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.

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

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.

[Author]

Replies