Responsive menu does not show
I have created a responsive menu but it doesn't show. I would like to use a hamburger menu
button. When it is active (button transform+transition, the hamburger menu icon -> the close icon
), the ul
will slide out from the right ( background -> opacity.5
).
I am not sure which part is erroneous. Do you have any suggestions?
$(document).ready(function() {
$('#toggle').on("click", function() {
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: rgba(0, 0, 0, 0.6);
border: none;
height: 5px;
width: 5%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li><a href="#constellation">Home</a></li>
<li><a href="#what is constellations?">About</a></li>
<li><a href="#12 constellations">12 Constellations</a></li>
<li><a href="#How to Find Constellations in the Night Sky?">Stargazing</a></li>
</ul>
</nav>
</div>
2 answers
-
answered 2019-08-14 09:26
Vikas Jadhav
You need to add
visibility:visible
to.active
class. and also some css modification to show menu bars..active { visibility: visible; }
$(document).ready(function() { $('#toggle').on("click", function() { $("#overlay").toggleClass('active'); $('#overlay').toggleClass('open'); }); });
.button-container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity .25s ease; opacity: 1; } .button-container:hover { opacity: .7; } .top:active { transform: translate(11px) translateX(0) rotate(45deg); } .middle:active { opacity: 0; } .bottom:active { transform: translateY(-11px) translateX(0) rotate(-45deg); } span { background: rgba(0, 0, 0, 0.6); border: none; height: 5px; width: 30px; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; } .middle{ top:10px; } .bottom{ top:20px; } .overlay { position: fixed; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; width: 5%; height: 0%; opacity: .6; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; } li { animation: fadeInRight .5s ease forwards; animation-delay: .35s; } li:nth-of-type(2) { animation-delay: .4s; } li:nth-of-type(3) { animation-delay: .45s; } li:nth-of-type(4) { animation-delay: .50s; } nav { position: relative; height: 70%; top: 20%; transform: translateY(-50%); font-size: 0.8em; } ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; } li { display: block; height: 25%; min-height: 50px; position: relative; opacity: 0; } a { display: block; position: relative; text-decoration: none; overflow: hidden; } a:hover { transform: scale(1); } a:hover:after, a:focus:after, a:active:after { width: 30%; } a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: rgba(0, 0, 0, 0.6); transition: .35s; } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } } .active { visibility: visible; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="button-container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay" id="overlay"> <nav class="overlay-menu"> <ul> <li><a href="#constellation">Home</a></li> <li><a href="#what is constellations?">About</a></li> <li><a href="#12 constellations">12 Constellations</a></li> <li><a href="#How to Find Constellations in the Night Sky?">Stargazing</a></li> </ul> </nav> </div>
-
answered 2019-08-14 11:53
Lars Gross
I would make a second class for the mobile devices.
<div class="overlay" id="overlay"> // copy //Change Class <nav class="overlay-menu"> //copy //Change Class <ul> <li><a href="#constellation">Home</a></li> <li><a href="#what is constellations?">About</a></li> <li><a href="#12 constellations">12 Constellations</a></li> <li><a href="#How to Find Constellations in the Night Sky?">Stargazing</a></li> </ul> </nav> </div>