My nav-bar benefits from a function that, once you scroll slightly, the navbar becomes smaller. I have also added a logo that changes on scroll. But during the logo change animation when you scroll UP the page, there is some really bothersome flickering. I believe it's an issue with my JS. Could you please have a look and tell me what you are experiencing? Thanks.
$(document).on("scroll", function() {
if ($(document).scrollTop() > 2) {
$('.miniBanner').addClass('show')
$('.logoBanner').addClass('hide')
$("header").addClass("shrink")
$("header").removeClass("grow")
} else {
$('.miniBanner').removeClass('show')
$('.logoBanner').removeClass('hide')
$("header").removeClass("shrink");
$("header").addClass("grow")
}
});
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
header {
width: 100%;
padding: 30px 0px;
/* revert to 50px 0px if we want the scroll animation */
/*animation magic*/
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
z-index: 9999;
top: 0;
position: sticky;
margin: 0;
background-color: white;
box-shadow: 1px 1px 16px 2px red;
}
.shrink {
padding: 10px 0;
box-shadow: 1px 1px 16px 2px #0000a0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
}
.grow {
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.shrink .logoBanner {
width: 8vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.grow .logoBanner {
width: 100vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner {
display: none;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner.show {
display: flex;
transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
width: 5vw
}
.logoBanner.hide {
visibility: hidden;
opacity: 0;
display: none;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
list-style: none;
width: 90%;
padding: 0;
margin: 0;
}
a {
width: 80px;
display: block;
margin: 5px;
border-radius: 15px;
padding-top: 5px;
}
li {
justify-content: center;
text-align: center;
}
li a {
background-color: white;
text-decoration: none;
color: #0000a0;
}
.logo {
/* brand guidelines */
display: flex;
justify-content: flex-start;
margin-right: 70%;
justify-content: center;
align-items: center;
}
.logoBanner {
width: 250vw;
background-color: white
}
.page {
height: 200vh;
width: 100vw;
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>
</script>
<body>
<header>
<ul>
<a href="#" class="logo">
<img class='logoBanner' src="https://2.bp.blogspot.com/_ORzF0-MDB50/TUI5aoTbDrI/AAAAAAAAEy0/kVSBqTuv1N0/s1600/bufforphington.jpg" alt="">
<img class='miniBanner' src="https://www.almanac.com/sites/default/files/users/AlmanacStaffArchive/hatching-raising-chicken-chicks_full_width.jpg" alt="">
</a>
<li>Portal</li>
<li>Feedback</li>
<li>Logout</li>
</ul>
</header>
<div class=page></div>
</body>
I am trying to create a menu like the one on this website: http://sterling.it/en/
I want my menu to slide from the left to the right and then to also disappear sliding to the left. Below is the code that I have written so far but it is not working properly. The menu slides the first time but then never slides again. I would really appreciate it if anyone could help me. Thanks in advance!
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").removeClass("active");
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>01</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>02</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>03</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link hamburgerMenu-menu" href=""><span>04</span></a></li>
</ul>
</nav>
</div>
</div>
What is happening here is animate was not called in first condition and when you call it after completion of that animation you should remove and add the active class.
I have changed your code a little bit,
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$("#hamburgerMenu").animate({
width: "0",
opacity: "0" // We are reducing opacity as it looks good. :)
},
// This is the callback when the animate is completed.
{
complete: function() {
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").removeClass("active");
}
});
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200",
opacity: "1"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>01</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>02</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>03</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgereMenu-nav-link hamburgerMenu-menu" href="">
<span>04</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
Tell me if it works fine.
You are removing your active class too quickly thus setting opacity and visibilty to hide your menu. Adding an animation to the width and hiding the menu on the callback will reverse your appear-animation.
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").animate({
width: "0"
}, function() {
$("#hamburgerMenu").removeClass("active");
});
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>01</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>02</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>03</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link hamburgerMenu-menu" href=""><span>04</span></a></li>
</ul>
</nav>
</div>
</div>
I'm trying to change my hamburger icon to go to X. What i want to create is the top and bottom lines to go to the middle and then to go X. This is my code so far:
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
Left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg) ;
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.icon.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg) ;
transform: rotate(-45deg);
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>
I really appreciate it if anyone would help me. Since I've been stuck in this for so long, it have been three or four days now. and i don't know what else to do!!
How about rotating your other line -45 deg?
EDIT: updated per your request via comments. This now uses keyframes. We say at 0% of the total time do nothing, then at 50% of the total time (1second of 2 total) bring the top and bottom line together in the middle.
Then at 100% of total time(at 2seconds)rotate our lines to make a X. You could also look into chaining animations but i find it kind of unreliable. this solution, takes your work and splits it into what you want to happen The forwards will keep the last frame of the animation, giving you the X look rather than repeating the animation over and over.
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
Left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
animation: makeXLeft 2s forwards;
}
.icon.active .hamburger:after {
animation: makeXRight 2s forwards;
}
/* Standard syntax */
#keyframes makeXLeft {
0% {}
50% {top: 0px;transform: rotate(0deg);}
100% {top: 0px;transform: rotate(45deg);}
}
/* Standard syntax */
#keyframes makeXRight {
0% {}
50% {top: 0px;transform: rotate(0deg);}
100% {top: 0px;transform: rotate(-45deg);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>
I am using this code pen on my website for a menu button in mobile view: http://codepen.io/anon/pen/LNNaYp
Sometimes the button breaks when it is spam clicked ie. the 'X' state would appear when the menu is closed.
Anyway i want to know how i could improve my javascript because i know i could do it using jQuery, i've tried but failed.
HTML
<body>
<div class="showcase"><button type="button" role="button" aria-label="Toggle Navigation" id="buttonOne" class="lines-button x2">
<span class="lines"></span>
</button>
</div>
</body>
CSS
body {
background-color: #5DC1AF;
}
.showcase {
margin-top: 40px;
text-align: center;
}
.lines-button {
padding: 2rem 1rem;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: 0.57143rem;
}
/*.lines-button:hover {
opacity: 1;
}*/
.lines-button:active {
transition: 0;
}
.lines {
display: inline-block;
width: 4rem;
height: 0.37143rem;
background: #ecf0f1;
border-radius: 0.28571rem;
transition: 0.3s;
position: relative;
}
.lines:before,
.lines:after {
display: inline-block;
width: 4rem;
height: 0.37143rem;
background: #ecf0f1;
border-radius: 0.28571rem;
transition: 0.3s;
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: 0.28571rem center;
transform-origin: 0.28571rem center;
}
.lines:before {
top: 1rem;
}
.lines:after {
top: -1rem;
}
/*.lines-button:hover .lines:before {
top: 1.14286rem;
}
.lines-button:hover .lines:after {
top: -1.14286rem;
}*/
.lines-button.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}
button {
display: inline-block;
margin: 0 1em;
border: none;
background: none;
}
button span {
display: block;
}
.lines-button.x2 .lines {
transition: background 0.3s 0.5s ease;
}
.lines-button.x2 .lines:before,
.lines-button.x2 .lines:after {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: top 0.3s 0.6s ease, -webkit-transform 0.3s ease;
transition: top 0.3s 0.6s ease, transform 0.3s ease;
}
.lines-button.x2.close .lines {
transition: background 0.3s 0s ease;
background: transparent;
}
.lines-button.x2.close .lines:before,
.lines-button.x2.close .lines:after {
transition: top 0.3s ease, -webkit-transform 0.3s 0.5s ease;
transition: top 0.3s ease, transform 0.3s 0.5s ease;
top: 0;
width: 4rem;
}
.lines-button.x2.close .lines:before {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
}
.lines-button.x2.close .lines:after {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
}
button:focus {
outline: none !important;
}
JS
var anchor = document.querySelectorAll('button');
[].forEach.call(anchor, function(anchor) {
var open = false;
anchor.onclick = function(event) {
event.preventDefault();
if (!open) {
this.classList.add('close');
open = true;
} else {
this.classList.remove('close');
open = false;
}
}
});
View in JSFiddle
Use following jQuery code
$(document).ready(function() {
$("button").click(function() {
$(this).toggleClass("close");
});
});
I want to create a dropdown menu (for mobile: media queries are already working) but I want to change the :hover effect of my menu button (CSS) to jquery .onclick() function.
I know my code isn't far away of working but I am not beeing able to fix what's wrong.
Anyone could give me a tip?
Heres the Fiddle: http://jsfiddle.net/4G3gg/
HTML
<ul class="navigation">
<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>
<li class="n1">Home</li>
<li class="n2">Portfolio</li>
<li class="n3">Services</li>
<li class="n4">About</li>
<li class="n5">Contacts</li>
</ul>
CSS
#mobile:hover{background-color: rgba(255, 255, 255, 0.15);}
a{text-decoration: none;color: white; padding: 10px 50px; font-weight: bold}
a:hover { color: #777; font-weight: bold;}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 50px;
height: 40px;
margin: 0 auto;
position: relative;
z-index: 100;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 30px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
}
.navigation:hover a.main {
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.04);
}
.navigation li {
width: 200px;
height: 40px;
background: #131313;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #131313; }
.navigation li:nth-child(odd) { background: #1c1c1c; }
.navigation li.n1 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n2 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n3 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n4 {
-webkit-transition:0.1s linear 0.1s;
-o-transition:0.1s linear 0.1s;
transition:0.1s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.navigation:hover .n4 {
transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
JQUERY/JS
$(".navigation").addClass("js");
$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function(){
$(".navigation").toggle();
});
Instead of the pseudo selector .navigation:hover use a new class like .navigation.open in css, then use .toggleClass() to toggle the menu visibility in the click() handler
jQuery(function ($) {
//$(".navigation").addClass("js");
//$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function () {
$(".navigation").toggleClass('open');
});
})
Demo: Fiddle
Note: In your fiddle, you forgot to add jQuery library