Close my spans when I click on my a inside my menu
Question
I made a responsive menu a few days ago, it's working pretty well except when I click my a inside the menu-ul I created, it closes the menu but not the state of my burger menu spans.
Here is the code so you can understand
function openNav(){ document.getElementById('menu-ul').classList.toggle("open"); }
body { display: grid; } #back-top { position: fixed; bottom: 40px; right: 14px; z-index: 9995; width: 35px; height: 35px; text-align: center; font-size: 45px; font-family: 'Agency FB', arial; line-height: 32px; background: #22cfb5; color: #fff; cursor: pointer; border-radius: 50%; transform: rotate(-90deg); -o-transition:background-color.5s; -ms-transition:background-color.5s; -moz-transition:background-color.5s; -webkit-transition:background-color.5s; transition:background-color.5s; text-decoration: none; } #back-top:hover { background: #4c4bbf; } header { position: sticky; top: 0; z-index: 9999; } #navcontainer { background-color: #4c4bbf; }.menu span { display: block; width: 19px; height: 2px; margin-bottom: 3px; position: relative; background: #ffffff; 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; transition-property: transform, background, opacity; transition-duration: 0.5s, 0.5s, 0.55s; transition-timing-function: cubic-bezier(0.77, 0.2, 0.05, 1), cubic-bezier(0.77, 0.2, 0.05, 1), ease; transition-delay: 0s, 0s, 0s; }.menu input { display: block; width: 19px; height: 13px; position: absolute; cursor: pointer; opacity: 0; z-index: 2; }.menu input:checked~span { opacity: 1; transform: rotate(-45deg) translate(-2px, -1px); }.menu input:checked~span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }.menu input:checked~span:nth-last-child(2) { transform: rotate(45deg) translate(-2px, -1px); } @media (max-width: 767px) { body { grid-template-columns: repeat(6, 1fr); grid-template-rows: 4.375rem 60.625rem 33.75rem 102.6875rem 103.75rem 74.375rem 11.1875rem; gap: 0px 20px; } header { grid-column: 1 / span 6; grid-row: 1 / span 1; } #navcontainer { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 4.375rem; column-gap: 10px; place-items: center; }.logo { grid-column: 1 / span 5; }.menu { grid-column: 6 / span 1; } #menu-ul { background: linear-gradient(-30deg,#6633ff,#6666ff); z-index: 9998; grid-column: 1 / span 6; grid-row: 1 / span 7; position: absolute; width: 100%; left: -767px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 4.375rem 60.625rem 33.75rem 102.6875rem 103.75rem 74.375rem 11.1875rem; gap: 0px 20px; transition: transform.3s ease-in-out; } #menu-ul.open { left: 0px; } ul { grid-column: 2 / span 4; grid-row: 1 / span 3; list-style-type: none; -webkit-font-smoothing: antialiased; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 4.375rem 4.375rem 4.375rem 4.375rem 4.375rem 4.375rem 4.375rem; place-items: center; }.menu input:checked~#menu-ul { transform: translateX(767px); }.a-menu1 { grid-column: 2 / span 4; grid-row: 1 / span 3; }.a-menu2 { grid-column: 2 / span 4; grid-row: 2 / span 3; }.a-menu3 { grid-column: 2 / span 4; grid-row: 3 / span 3; }.a-menu4 { grid-column: 2 / span 4; grid-row: 4 / span 3; } #linkedin-menu { height: 28px; width: 28px; grid-column: 1 / span 3; grid-row: 6 / span 2; } #insta-menu { height: 28px; width: 28px; grid-column: 4 / span 3; grid-row: 6 / span 2; } }
<body> <a href="#" id="back-top" title="Back top">></a> <header> <nav role="navigation" id="navcontainer"> <div class="logo"> <img src="../logo_249.png"> </div> <div class="menu"> <input type="checkbox" onclick="openNav()"/> <span id="span1"></span> <span id="span2"></span> <span id="span3"></span> </div> </nav> </header> <div id="menu-ul"> <ul> <a class="a-menu1" href="#bienvenue" onclick="openNav()"><li>À propos</li></a> <a class="a-menu2" href="#services" onclick="openNav()"><li>Mes services</li></a> <a class="a-menu3" href="#projets" onclick="openNav()"><li>Mes projets</li></a> <a class="a-menu4" href="#contact" onclick="openNav()"><li>Contact</li></a> <img src="img/linkedin-white.png" id="linkedin-menu"> <img src="img/insta-white.png" id="insta-menu"> </ul> </div> </body>
Can someone help me with this? I already checked some subjects close to mine, but didn't find the answer resolving my problem. Thank you very much: :)
2 answers
solution1
0 ACCPTED 2020-08-31 21:20:36
This's happening because your checkbox is not unchecked, if you click on menu item. You can modify function like this:
function openNav(){
const menuUl = document.getElementById('menu-ul');
const burger = document.getElementById('burger');
if (menuUl.classList.contains('open')) {
burger.checked = false;
}
menuUl.classList.toggle('open');
}
And add id-attribute to input[type="checkbox"]:
<input id="burger" type="checkbox" onclick="openNav()"/>
I hope, this will help you!
solution2
0 2020-08-31 21:26:31
You can achieve this by small changes as below.
Step 1: Create a function toggleMenu() to toggle the checkbox which is responsible for for the animation.
Step 2: add the above function to all anchor tags as onclick="toggleMenu()" .
Please check the Demo .
function openNav(){ document.getElementById('menu-ul').classList.toggle("open"); } function toggleMenu() { document.getElementsByClassName('menu')[0].getElementsByTagName('input')[0].checked =.document.getElementsByClassName('menu')[0].getElementsByTagName('input')[0];checked; openNav(); }
body { display: grid; } #back-top { position: fixed; bottom: 40px; right: 14px; z-index: 9995; width: 35px; height: 35px; text-align: center; font-size: 45px; font-family: 'Agency FB', arial; line-height: 32px; background: #22cfb5; color: #fff; cursor: pointer; border-radius: 50%; transform: rotate(-90deg); -o-transition:background-color.5s; -ms-transition:background-color.5s; -moz-transition:background-color.5s; -webkit-transition:background-color.5s; transition:background-color.5s; text-decoration: none; } #back-top:hover { background: #4c4bbf; } header { position: sticky; top: 0; z-index: 9999; } #navcontainer { background-color: #4c4bbf; }.menu span { display: block; width: 19px; height: 2px; margin-bottom: 3px; position: relative; background: #ffffff; 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; transition-property: transform, background, opacity; transition-duration: 0.5s, 0.5s, 0.55s; transition-timing-function: cubic-bezier(0.77, 0.2, 0.05, 1), cubic-bezier(0.77, 0.2, 0.05, 1), ease; transition-delay: 0s, 0s, 0s; }.menu input { display: block; width: 19px; height: 13px; position: absolute; cursor: pointer; opacity: 0; z-index: 2; }.menu input:checked~span { opacity: 1; transform: rotate(-45deg) translate(-2px, -1px); }.menu input:checked~span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }.menu input:checked~span:nth-last-child(2) { transform: rotate(45deg) translate(-2px, -1px); } @media (max-width: 767px) { body { grid-template-columns: repeat(6, 1fr); grid-template-rows: 4.375rem 60.625rem 33.75rem 102.6875rem 103.75rem 74.375rem 11.1875rem; gap: 0px 20px; } header { grid-column: 1 / span 6; grid-row: 1 / span 1; } #navcontainer { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 4.375rem; column-gap: 10px; place-items: center; }.logo { grid-column: 1 / span 5; }.menu { grid-column: 6 / span 1; } #menu-ul { background: linear-gradient(-30deg,#6633ff,#6666ff); z-index: 9998; grid-column: 1 / span 6; grid-row: 1 / span 7; position: absolute; width: 100%; left: -767px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 4.375rem 60.625rem 33.75rem 102.6875rem 103.75rem 74.375rem 11.1875rem; gap: 0px 20px; transition: transform.3s ease-in-out; } #menu-ul.open { left: 0px; } ul { grid-column: 2 / span 4; grid-row: 1 / span 3; list-style-type: none; -webkit-font-smoothing: antialiased; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 4.375rem 4.375rem 4.375rem 4.375rem 4.375rem 4.375rem 4.375rem; place-items: center; }.menu input:checked~#menu-ul { transform: translateX(767px); }.a-menu1 { grid-column: 2 / span 4; grid-row: 1 / span 3; }.a-menu2 { grid-column: 2 / span 4; grid-row: 2 / span 3; }.a-menu3 { grid-column: 2 / span 4; grid-row: 3 / span 3; }.a-menu4 { grid-column: 2 / span 4; grid-row: 4 / span 3; } #linkedin-menu { height: 28px; width: 28px; grid-column: 1 / span 3; grid-row: 6 / span 2; } #insta-menu { height: 28px; width: 28px; grid-column: 4 / span 3; grid-row: 6 / span 2; } }
<body> <a href="#" id="back-top" title="Back top">></a> <header> <nav role="navigation" id="navcontainer"> <div class="logo"> <img src="../logo_249.png"> </div> <div class="menu"> <input type="checkbox" onclick="openNav()"/> <span id="span1"></span> <span id="span2"></span> <span id="span3"></span> </div> </nav> </header> <div id="menu-ul"> <ul> <a class="a-menu1" href="#bienvenue" onclick="toggleMenu()"><li>À propos</li></a> <a class="a-menu2" href="#services" onclick="toggleMenu()"><li>Mes services</li></a> <a class="a-menu3" href="#projets" onclick="toggleMenu()"><li>Mes projets</li></a> <a class="a-menu4" href="#contact" onclick="toggleMenu()"><li>Contact</li></a> <img src="img/linkedin-white.png" id="linkedin-menu"> <img src="img/insta-white.png" id="insta-menu"> </ul> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why must I click twice to open and close my menu
when i click on my menu sub menu part is not visible?
How can i display inside a div the content of the spans in my code when i clic on them?
On mobile I want my navbar to close when I click an ID
Why does my js modal not close when I click outside?
How to close my navbar when I click on one of the sections?
How I can make my links in menu close the menu after click on them?
Why is my normal navbar disappearing when I click on the menu icon
How to smooth my links when I click on hamburger menu?
Why doesn't my collapsible menu expand when I click on it?
Related Tags