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
JavaScript
x
3
1
function openNav(){2
document.getElementById('menu-ul').classList.toggle("open");3
}JavaScript
1
184
184
1
body {2
display: grid; 3
}4
5
#back-top {6
position: fixed;7
bottom: 40px;8
right: 14px;9
z-index: 9995;10
width: 35px; 11
height: 35px;12
text-align: center;13
font-size: 45px;14
font-family: 'Agency FB', arial;15
line-height: 32px;16
background: #22cfb5;17
color: #fff;18
cursor: pointer;19
border-radius: 50%;20
transform: rotate(-90deg);21
-o-transition:background-color .5s;22
-ms-transition:background-color .5s;23
-moz-transition:background-color .5s;24
-webkit-transition:background-color .5s;25
transition:background-color .5s;26
text-decoration: none;27
}28
29
#back-top:hover {30
background: #4c4bbf;31
}32
33
header {34
position: sticky;35
top: 0;36
z-index: 9999;37
}38
39
#navcontainer {40
background-color: #4c4bbf;41
}42
43
.menu span {44
display: block;45
width: 19px;46
height: 2px;47
margin-bottom: 3px;48
position: relative;49
background: #ffffff; 50
z-index: 1;51
transform-origin: 4px 0px;52
transition: transform 0.5s 53
cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s 54
cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;55
transition-property: transform, background, opacity;56
transition-duration: 0.5s, 0.5s, 0.55s;57
transition-timing-function:58
cubic-bezier(0.77, 0.2, 0.05, 1),59
cubic-bezier(0.77, 0.2, 0.05, 1),60
ease;61
transition-delay: 0s, 0s, 0s;62
}63
64
.menu input {65
display: block;66
width: 19px;67
height: 13px; 68
position: absolute;69
cursor: pointer;70
opacity: 0;71
z-index: 2;72
}73
74
.menu input:checked~span {75
opacity: 1;76
transform: rotate(-45deg) translate(-2px, -1px);77
}78
79
.menu input:checked~span:nth-last-child(3) {80
opacity: 0;81
transform: rotate(0deg) scale(0.2, 0.2);82
}83
84
.menu input:checked~span:nth-last-child(2) {85
transform: rotate(45deg) translate(-2px, -1px);86
}87
88
@media (max-width: 767px) {89
body {90
grid-template-columns: repeat(6, 1fr);91
grid-template-rows: 4.375rem 60.625rem 33.75rem 102.6875rem 103.75rem 74.375rem 11.1875rem;92
gap: 0px 20px;93
}94
95
header {96
grid-column: 1 / span 6;97
grid-row: 1 / span 1; 98
} 99
100
#navcontainer {101
display: grid;102
grid-template-columns: repeat(6, 1fr);103
grid-template-rows: 4.375rem;104
column-gap: 10px;105
place-items: center;106
}107
108
.logo {109
grid-column: 1 / span 5; 110
}111
112
.menu {113
grid-column: 6 / span 1;114
}115
116
#menu-ul {117
background: linear-gradient(-30deg,#6633ff,#6666ff);118
z-index: 9998;119
grid-column: 1 / span 6; 120
grid-row: 1 / span 7;121
position: absolute;122
width: 100%;123
left: -767px;124
display: grid;125
grid-template-columns: repeat(6, 1fr);126
grid-template-rows: 4.375rem 60.625rem 33.75rem 102.6875rem 103.75rem 74.375rem 11.1875rem;127
gap: 0px 20px;128
transition: transform .3s ease-in-out;129
}130
131
#menu-ul.open {132
left: 0px;133
}134
135
ul {136
grid-column: 2 / span 4;137
grid-row: 1 / span 3;138
list-style-type: none;139
-webkit-font-smoothing: antialiased;140
display: grid;141
grid-template-columns: repeat(6, 1fr);142
grid-template-rows: 4.375rem 4.375rem 4.375rem 4.375rem 4.375rem 4.375rem 143
4.375rem;144
place-items: center;145
}146
147
.menu input:checked~#menu-ul {148
transform: translateX(767px);149
}150
151
.a-menu1 {152
grid-column: 2 / span 4;153
grid-row: 1 / span 3;154
}155
156
.a-menu2 {157
grid-column: 2 / span 4;158
grid-row: 2 / span 3;159
}160
161
.a-menu3 {162
grid-column: 2 / span 4;163
grid-row: 3 / span 3;164
}165
166
.a-menu4 {167
grid-column: 2 / span 4;168
grid-row: 4 / span 3;169
}170
171
#linkedin-menu {172
height: 28px;173
width: 28px;174
grid-column: 1 / span 3;175
grid-row: 6 / span 2;176
}177
178
#insta-menu {179
height: 28px;180
width: 28px;181
grid-column: 4 / span 3;182
grid-row: 6 / span 2;183
}184
}JavaScript
1
27
27
1
<body>2
<a href="#" id="back-top" title="Back top">></a>3
<header>4
<nav role="navigation" id="navcontainer">5
<div class="logo">6
<img src="../logo_249.png">7
</div>8
<div class="menu">9
<input type="checkbox" onclick="openNav()"/>10
<span id="span1"></span>11
<span id="span2"></span>12
<span id="span3"></span>13
</div>14
</nav>15
</header>16
17
<div id="menu-ul">18
<ul>19
<a class="a-menu1" href="#bienvenue" onclick="openNav()"><li>À propos</li></a>20
<a class="a-menu2" href="#services" onclick="openNav()"><li>Mes services</li></a>21
<a class="a-menu3" href="#projets" onclick="openNav()"><li>Mes projets</li></a>22
<a class="a-menu4" href="#contact" onclick="openNav()"><li>Contact</li></a>23
<img src="img/linkedin-white.png" id="linkedin-menu">24
<img src="img/insta-white.png" id="insta-menu">25
</ul>26
</div>27
</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! 🙂
Advertisement
Answer
This’s happening because your checkbox is not unchecked, if you click on menu item. You can modify function like this:
JavaScript
1
11
11
1
function openNav(){2
const menuUl = document.getElementById('menu-ul');3
const burger = document.getElementById('burger');4
5
if (menuUl.classList.contains('open')) {6
burger.checked = false;7
}8
9
menuUl.classList.toggle('open');10
}11
And add id-attribute to input[type=”checkbox”]:
JavaScript
1
2
1
<input id="burger" type="checkbox" onclick="openNav()"/>2
I hope, this will help you!