How to Close Toggle Menu When Clicking Navigation Item Anchor Link

How to Close toggle menu when clicking navigation item anchor link

Just add this in $(document).ready function

$('#menu li').on('click', function(){
$("#menu").hide();
$("#menu-icon").removeClass("active");
});

How to close the overlay anchor link menu when clicked?

Bind a click event handler to the links. Within this even handler, remove the classes that define the open state of the menu.

$("#toggle").click(function() {  $(this).toggleClass("active");  $("#fullnav").toggleClass("open");});
$(".hamburger-menu").click(function() { $(this).toggleClass("change");});
$("#fullnavMenu a").on("click", function() { $(".hamburger-menu").removeClass("change"); $("#toggle").removeClass("active"); $("#fullnav").removeClass("open");});
.fullnav {  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #333333;  z-index: 100;  visibility: hidden;  -webkit-transition: opacity .35s, visibility .35s, height .35s;  transition: opacity .35s, visibility .35s, height .35s;  overflow: hidden;}
.hamburger-menu { width: 45px; height: 35px; position: fixed; top: 40px; right: 50px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; z-index: 500;}
.line { width: inherit; height: 5px; background-color: #7A7A7A; border-radius: 25px; transform-origin: right; transition: transform .5s;}
.line-2 { height: 3px;}
.change .line-1 { transform: translate(-4px, -4px) rotateZ(-45deg);}
.change .line-2 { opacity: 0;}
.change .line-3 { transform: translate(-4px, -3px) rotateZ(45deg);}
.fullnav.open { opacity: 1; visibility: visible; height: 100%;}
.fullnav.close { opacity: 0; visibility: visible; height: 0%;}
.fullnav.open li { -webkit-animation: fadeInRight .5s ease forwards; animation: fadeInRight .5s ease forwards; -webkit-animation-delay: .35s; animation-delay: .35s;}
.fullnav.open li:nth-of-type(2) { -webkit-animation-delay: .4s; animation-delay: .4s;}
.fullnav.open li:nth-of-type(3) { -webkit-animation-delay: .45s; animation-delay: .45s;}
.fullnav.open li:nth-of-type(4) { -webkit-animation-delay: .50s; animation-delay: .50s;}
.fullnav nav { display: flex; align-items: center; justify-content: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 3rem; font-family: Montserrat-Light; font-weight: 400; line-height: 7rem; text-align: center;}
.fullnav ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%;}
.fullnav ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 1;}
.fullnav ul li a { display: block; position: relative; color: #FFF; text-decoration: none; overflow: hidden;}
.fullnav ul li a:hover:after,.fullnav ul li a:focus:after,.fullnav ul li a:active:after { width: 100%;}
.fullnav ul li a:hover::before,.fullnav ul li a:focus::before,.fullnav ul li a:active::before { width: 100%;}
.fullnav ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 3px; background: #FFF; -webkit-transition: .35s; transition: .35s;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrapper"> <div class="hamburger-menu" id="toggle"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> </div>
<div class="fullnav" id="fullnav"> <nav class="fullnavMenu" id="fullnavMenu"> <ul> <li><a href="#a">About</a></li> <li><a href="#b">Skills</a></li> <li><a href="#c">Projects</a></li> <li><a href="#d">Contact</a></li> </ul> </nav> </div>

Close toggle menu after clicking outside of it and on a link

The simplest way is to add an Event Listener in the whole document and use the conditional to see where you are clicking. Here's a Codepen with this logic: https://codepen.io/alac1984/pen/RwNVKOe

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">

<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<a href="#" class="icon" id="myButton">
<i id="itag" class="fa fa-bars"></i>
</a>
</div>

<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>

<!-- End smartphone / tablet look -->
</div>

CSS:

body {
font-family: Arial, Helvetica, sans-serif;
}

.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}

.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}

.topnav #myLinks {
display: none;
}

.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.active {
background-color: #4CAF50;
color: white;
}

JS:

const button = document.getElementById('myButton');
const div = document.getElementById('myLinks');
const icon = document.querySelector('.icon');
console.log(icon);

document.addEventListener('click', myFunction)

function myFunction(e) {
e.preventDefault();
console.log(e.target);

if((div.style.display === '' || div.style.display === 'none') && (e.target === button || e.target === itag)) {
div.style.display = 'block';
} else if((div.style.display === '' || div.style.display === 'none') && (e.target !== button || e.target !== itag)) {
div.style.display = 'none';
} else {
div.style.display = 'none';
}
}

Close hamburger menu when click on anchor links on same page

It is possible to add a little JavaScript without breaking the behaviour of your closing icon.

See your modified code snippet below, when adding an eventListener on click of your menu links, just uncheck the input field corresponding to toggle the menu burger icon:

var menu = document.getElementById('menu');    var closeIcon = document.getElementById("closeIcon");
menu.addEventListener('click', handleMenuClick);
function handleMenuClick(event) { if (event.target instanceof HTMLAnchorElement) { closeIcon.checked = false; } }
/* * Made by Erik Terwan * 24th of November 2015 * MIT License * * * If you are thinking of using this in * production code, beware of the browser * prefixes. */
body{ margin: 0; padding: 0; /* make it look decent enough */ background: #232323; color: #cdcdcd; font-family: "Avenir Next", "Avenir", sans-serif;}
a{ text-decoration: none; color: #232323; transition: color 0.3s ease;}
a:hover{ color: tomato;}
#menuToggle{ display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none;}
#menuToggle input{ display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none;}
/* * Just a quick hamburger */#menuToggle span{ display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
#menuToggle span:first-child{ transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){ transform-origin: 0% 100%;}
/* * Transform all the slices of hamburger * into a crossmark. */#menuToggle input:checked ~ span{ opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323;}
/* * But let's hide the middle one. */#menuToggle input:checked ~ span:nth-last-child(3){ opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
/* * Ohyeah and the last one should go the other direction */#menuToggle input:checked ~ span:nth-last-child(2){ transform: rotate(-45deg) translate(0, -1px);}
/* * Make this absolute positioned * at the top left of the screen */#menu{ position: absolute; width: 300px; margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: #ededed; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
#menu li{ padding: 10px 0; font-size: 22px;}
#menu a { display: block;}
/* * And let's slide it in from the left */#menuToggle input:checked ~ ul{ transform: none;}
<!--    Made by Erik Terwan    --><!--   24th of November 2015   --><!--        MIT License        --><nav role="navigation">  <div id="menuToggle">    <!--    A fake / hidden checkbox is used as click reciever,    so you can use the :checked selector on it.    -->    <input id="closeIcon" type="checkbox" />        <!--    Some spans to act as a hamburger.        They are acting like a real hamburger,    not that McDonalds stuff.    -->    <span></span>    <span></span>    <span></span>        <!--    Too bad the menu has to be inside of the button    but hey, it's pure CSS magic.    -->    <ul id="menu"><li>          <a href="#">Home</a>        </li>        <li>          <a href="#">Info</a>        </li>        <li>          <a href="#">Contact</a>        </li>        <li>          <a href="https://erikterwan.com/" target="_blank">Show me more</a>        </li>    </ul>  </div></nav>

Close nav menu overlay when clicking nav link. Only the first nav link works

Your hunch is totally correct. This does it.

// Select element function
const selectElement = (element) =>
document.querySelector(element);
const getAllWithClass = (className) =>
document.getElementsByClassName(className);

const
body = selectElement('body'),
// Converts the returned collection to a proper Array
navLinks = Array.from(getAllWithClass("nav-link"));

// Close menu on .nav-link click
navLinks.forEach(link => { // The Array method `forEach` loops through
link.addEventListener('click', function() {
body.classList.remove('open');
console.log("(No more blue background means it's closed)");
});
});
.open .nav-list {
background-color: lightskyblue;
}
<body class="open">
<ul class="nav-list">
<li class="nav-item">
<a href="#showcase" class="nav-link">Home</a></li>
<li class="nav-item">
<a href="#robots" class="nav-link">Robots</a></li>
<li class="nav-item">
<a href="#projects" class="nav-link">Projects</a></li>
</ul>
</body>


Related Topics



Leave a reply



Submit