Make hamburger menu fadeout work

Make hamburger menu fadeout work - javascript

I am doing a "hamburger" menu, responsive style, with a menu that will cover the page the viewer is at.
I got all HTML/CSS figured out, but I wanted to add fade in and fade out effects.
Fade in works with jquery code but the menu isn't fading out. Already tried some ideas that were on SO but none works.
Any help? Fiddle: https://jsfiddle.net/f19kz640/
Sorry for bad eng...
HTML
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
CSS
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
Javascript/JQuery
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});

You could easily simplify things a great deal:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
$('#menu').fadeToggle(300);
});
});
Updated Fiddle
There's no reason to play with opacity properties or display properties, it's all part of the jQuery fade() function, which you can merely toggle.

Related

sidebar navigation text not fixed while transition

i try to change css but not work text short text is ok but i have to put long line when click it not smooth while transition working i use template from codeply(https://www.codeply.com/p/RXiaRJEqWj#), i want text show up smooth like button or short text please advise me how I should use it to remember for next time i can help in community if i saw someone ask like me thank you.
<div id="mySidenav" class="sidenav">
<h3>Painéis</h3>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
</div>
<nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();" style="z-index: 2">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Navbar brand -->
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
</div>
</nav>
<script>
function Nav() {
var width = document.getElementById("mySidenav").style.width;
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
$('.animated-icon').toggleClass('open');
}
else {
document.getElementById("mySidenav").style.width = "0px";
$('.animated-icon').toggleClass('open');
}
}
</script>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff!important;
backdrop-filter: blur(15px);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0px 0px 8px #000000;
}
.sidenav h3{
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #ffffff;
background-color:#000000;
padding:12px;
}
.sidenav .item i{
margin-right: 15px;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
button {border:none !important;}
button:focus{outline: none;}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
vertical-align: middle;
}
i tried to change the css and and the javascript but it did changed at all, just gave me more problems, i did change position and display in the css, but dont seem this is the problem, someone help me pls

You dont need JQuery with this simple code.
Try this:
function Nav() {
var width = document.getElementById("mySidenav").style.width;
var icon = document.querySelector(".animated-icon");
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
icon.classList.toggle('open');
} else {
document.getElementById("mySidenav").style.width = "0px";
icon.classList.toggle('open');
}
}
body{
margin:0;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff!important;
backdrop-filter: blur(15px);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0px 0px 8px #000000;
}
.sidenav h3{
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #ffffff;
background-color:#000000;
padding:12px;
}
.sidenav .item i{
margin-right: 15px;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
button {border:none !important;}
button:focus{outline: none;}
.hamburger-button{
margin:25px;
background-color: rgba(0,0,0,0);
}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
vertical-align: middle;
}
.navbar-toggler{
position:relative;
z-index:2;
}
<div id="mySidenav" class="sidenav">
<h3>Painéis</h3>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
</div>
<nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();" style="z-index: 2">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Navbar brand -->
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
</div>
</nav>

I am trying to get my Javascript to cooperate and open my hamburger icon with my links inside

Here is the code I am trying to get to cooperate with one another. I just need my Javascript to help in opening my hamburger icon menu. Currently, my hamburger icon works. It will create an "x" when clicked on, but it's just that my menu does not display when I click on the hamburger icon as it should.
* JAVASCRIPT *
export const navAnimation = function () {
const hamburgerDiv = document.querySelector(".nav--hamburger");
const hamburgerIcon = document.querySelector(".hamburger");
const nav = document.querySelector(".nav--ul");
const blur = document.querySelector(".blur");
hamburgerDiv.addEventListener("click", () => {
// nav.classList.toggle("hidden");
hamburgerIcon.classList.toggle("hidden");
cross.classList.toggle("hidden");
nav.classList.toggle("move-in");
nav.classList.toggle("move-out");
// blur.classList.toggle("hidden");
blur.classList.toggle("move-in");
blur.classList.toggle("move-out");
});
};
navAnimation();
// Hamburger Icon //
$(document).ready(function(){
$('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
* HTML *
<header class="header">
<div class="blur move-out"></div>
<div class="header--logo">
<img src="images/Logo-2.png" alt="Site logo" class="logo"/>
</div>
<nav class="nav">
<div class="nav--hamburger">
<div id="nav-icon1" class = "hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="nav--ul move-out">
<li class="nav--li--item">
<a class="nav--li--anchor" href="#home">
<span class="order"></span>HOME
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#about">
<span class="order"></span>ABOUT
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#services"
><span class="order"></span>SERVICES
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="booking">
<span class="order"></span>BOOKING
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#footer">
<span class="order"></span>CONTACT US
</a>
</li>
</ul>
</nav>
</header>
* CSS *
<style>
#nav-icon1 {
width: 55px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #551a00;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 10px;
}
#nav-icon1 span:nth-child(3) {
top: 20px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nav {
font-family: "Bellefair", serif;
color: #fff;
font-size: var(--step-0);
font-weight: 700;
position: absolute;
top: 0;
right: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
width: 80%;
overflow: hidden;
}
.nav--ul {
list-style-type: none;
letter-spacing: 2px;
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
min-height: 100vh;
align-items: start;
width: 100%;
position: relative;
z-index: 2;
padding-left: 2rem;
}
.nav--li--anchor {
color: #fff;
text-decoration: none;
}
.nav--li--anchor:hover {
cursor: pointer;
}
.cross {
position: absolute;
top: 3%;
right: 10%;
transform: translate(-3%, -10%);
}
.blur {
width: 80%;
left: 20%;
position: absolute;
min-height: 118.3vh;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
z-index: 2;
}
.hidden {
visibility: hidden;
}
.move-in {
animation: scale-in-hor-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
</style>

Responsive Navbar: Menu Not Disappearing (CSS and JS)

Building a responsive menu bar. The problem is when you click the hamburger lines and the page options appear, when you click the links, the menu doesn't disappear. I've tried adding and removing a class disappear{display:none}, and I've also tried building a for loop but neither works. I know I'm way overthinking this, what options should I explore to fix it?
(Note that you may have to shrink your screen down to less than 600px in width to see the hamburger menu if it isn't currently available to click)
lkl;
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.getElementsByClassName('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

the problem was using getElementsByClassName like this document.getElementsByClassName('.links').forEach you can not use forEach and .linke css selector with getElementsByClassName use querySelectorAll
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.querySelectorAll('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

when using getElementsByClassName you shouldn't use . while specifying the class.
getElementsByClassName returns HTMLCollection that doesn't have forEach loop, so you need to convert it into array as:
const linksArray = [...links];
or
const linksArray = Array.from( links );
You can also use querySelectorAll(".links")
const toggleBtn = document.getElementById("nav_check");
const menuBtn = document.getElementById("nav_icon");
toggleBtn.addEventListener("click", function() {
if (!menuBtn.classList.contains("open")) {
menuBtn.classList.add("open");
} else {
menuBtn.classList.remove("open");
}
});
const links = document.getElementsByClassName("links");
const linksArray = [...links];
linksArray.forEach((item) => {
item.addEventListener("click", (event) => {
document.getElementById("nav_check").checked = false;
menuBtn.classList.remove("open");
});
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background: #d3d3d3;
}
.navBar {
width: 100%;
height: 3.3rem;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #0A2463;
position: fixed;
color: #fafafa;
}
.nav_btn {
display: none;
}
.nav_links>a {
padding: .5rem;
margin: auto;
text-decoration: none;
color: #fafafa;
}
.nav_links>a:hover {
color: #ED1250;
}
#nav_check,
#nav_icon {
display: none;
}
.resume {
color: #ED1250;
border-radius: 4px;
border: solid #ED1250 1px;
padding: .5rem;
margin-right: .5rem;
}
.resume:hover {
background: rgb(237, 18, 80, .2);
color: #fafafa;
}
.social {
display: none;
}
#media (max-width:600px) {
.navBar {
height: 3.3rem;
}
.nav_btn {
display: inline-block;
float: right;
}
#nav_icon {
display: block;
width: 60px;
height: 45px;
position: fixed;
right: 1rem;
top: -3rem;
margin: 50px auto;
z-index: 6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border: solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),
#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-weight: 400;
line-height: 4.5rem;
font-size: 3rem;
background: #0A2463;
}
.menu_textWrapper {
display: flex;
flex-direction: column !important;
width: 18rem;
background: #0A2463;
}
.links:hover::after {
content: "»";
font-size: 2.5rem;
}
#nav_check:not(:checked)~menu {
display: none;
}
.navBar>#nav_check:checked~.menu {
display: flex;
flex-direction: column;
}
}
/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
[].forEach.call( document.getElementsByClassName('links'), item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>
please use:
[].forEach.call( document.querySelectorAll('a'), function(el) {
// whatever with the current node
});

Jquery Click this or that and toggle class

Im stuck on toggeling a class when there is a click event on either the parent or child item. It is about a navigation menu that can be clickable on the entire bar or just the icon.
Current situation: (according to the fiddle)
When you click on the red block, the class is-active will be toggled on the .hamburger-menu class. Allowing the icon to transition via CSS.
But when you click on the hamburger icon it does not toggle the class.
How can the class is-active be toggled when there is a click event on either the #menuContainer or the .hamburger-menu div?
jQuery(function($) {
$(document).ready(function() {
$("#menuContainer, .hamburger-menu").click(function() {
$(".hamburger-menu").toggleClass("is-active");
});
});
});
.menu_container {
display: block;
position: absolute;
left: 45%;
top: 45%;
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
.menu_container .menu-active {
background-color: blue;
}
.hamburger-menu {
display: inline-block;
position: absolute;
left: 35%;
top: 45%;
margin: 0 auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu:hover {
cursor: pointer;
}
.hamburger-menu span {
display: block;
width: 40px;
max-width: 100%;
height: 3px;
background-color: #414042;
margin-bottom: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu.is-active span:nth-child(2) {
display: none;
}
.hamburger-menu.is-active span:nth-child(1) {
-webkit-transform: translateY(4.5px) rotate(45deg);
-ms-transform: translateY(4.5px) rotate(45deg);
-o-transform: translateY(4.5px) rotate(45deg);
transform: translateY(4.5px) rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(3) {
-webkit-transform: translateY(-4.5px) rotate(-45deg);
-ms-transform: translateY(-4.5px) rotate(-45deg);
-o-transform: translateY(-4.5px) rotate(-45deg);
transform: translateY(-4.5px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>

The issue is because you've added the click event handler to two elements, #menuContainer and .hamburger-menu. The latter is a child of the former, so when you click that the handler fires twice. This means that the class is toggled on, then immediately off again (or vice versa)
To fix this issue, call stopPropagation() on the event. This stops the event bubbling up the DOM and being handled twice.
jQuery(function($) { // Note you only need one document.ready handler here
$("#menuContainer, .hamburger-menu").click(function(e) {
e.stopPropagation();
$(".hamburger-menu").toggleClass("is-active");
});
});
.menu_container {
display: block;
position: absolute;
left: 45%;
top: 45%;
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
.menu_container .menu-active {
background-color: blue;
}
.hamburger-menu {
display: inline-block;
position: absolute;
left: 35%;
top: 45%;
margin: 0 auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu:hover {
cursor: pointer;
}
.hamburger-menu span {
display: block;
width: 40px;
max-width: 100%;
height: 3px;
background-color: #414042;
margin-bottom: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu.is-active span:nth-child(2) {
display: none;
}
.hamburger-menu.is-active span:nth-child(1) {
-webkit-transform: translateY(4.5px) rotate(45deg);
-ms-transform: translateY(4.5px) rotate(45deg);
-o-transform: translateY(4.5px) rotate(45deg);
transform: translateY(4.5px) rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(3) {
-webkit-transform: translateY(-4.5px) rotate(-45deg);
-ms-transform: translateY(-4.5px) rotate(-45deg);
-o-transform: translateY(-4.5px) rotate(-45deg);
transform: translateY(-4.5px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>

The problem is that the event is propagating up to the parent when you click on the hamburger menu causing the class to toggle twice and make it look like it's not working. To fix this, you need to add e.stopPropagation(); to the click function.
jQuery(function($) {
$(document).ready(function() {
$("#menuContainer, .hamburger-menu").click(function(e) {
$(".hamburger-menu").toggleClass("is-active");
e.stopPropagation();
});
});
});
.menu_container {
display: block;
position: absolute;
left: 45%;
top: 45%;
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
.menu_container .menu-active {
background-color: blue;
}
.hamburger-menu {
display: inline-block;
position: absolute;
left: 35%;
top: 45%;
margin: 0 auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu:hover {
cursor: pointer;
}
.hamburger-menu span {
display: block;
width: 40px;
max-width: 100%;
height: 3px;
background-color: #414042;
margin-bottom: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu.is-active span:nth-child(2) {
display: none;
}
.hamburger-menu.is-active span:nth-child(1) {
-webkit-transform: translateY(4.5px) rotate(45deg);
-ms-transform: translateY(4.5px) rotate(45deg);
-o-transform: translateY(4.5px) rotate(45deg);
transform: translateY(4.5px) rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(3) {
-webkit-transform: translateY(-4.5px) rotate(-45deg);
-ms-transform: translateY(-4.5px) rotate(-45deg);
-o-transform: translateY(-4.5px) rotate(-45deg);
transform: translateY(-4.5px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>

Why are the CSS transforms not displayed?

I'm trying to make a navigation panel slide in on the click of a nav button in the main menu. Needless to say, it's not working. I've made this work before, so I'm not sure what's going on. Help?
HTML
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i class="account-control fa fa-user"></i>
</div>
<div class="wrapper">
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li>Billing</li>
<li>Support</li>
<li>Servers</li>
<li>Settings</li>
<li>Reports</li>
</ul>
</nav>
</div>
<!-- Copyright -->
<footer>
<form action="" class="search">
<input type="search" name="search" placeholder="Search">
</form>
<p class="copyright">asdf</p>
</footer>
</div>
</div>
Relevant CSS
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
top: 100px;
z-index: 0;
overflow: hidden;
}
#content {
position: relative;
left: 0;
z-index: 5;
height: 100%;
overflow: auto;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.sidebar-open #content {
-webkit-transform: translate(200px, 0);
-moz-transform: translate(200px, 0);
transform: translate(200px, 0);
}
/* Header */
.header {
background-color: #222222;
width: 100%;
height: 100px;
position: absolute;
top: 0;
z-index: 1;
}
#nav-button {
font-size: 24px;
color: white;
position: absolute;
left: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
#nav-button.open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.account-control {
font-size: 24px;
color: white;
position: absolute;
right: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Navigation */
#sidebar {
position: absolute;
top: 100px;
left: 0;
visibility: hidden;
width: 200px;
height: 100%;
background: #222222;
opacity: 1;
z-index: 1;
-webkit-transform: all 0.5s;
-moz-transform: all 0.5s;
transform: all 0.5s;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.sidebar-open #sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
#sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.sidebar-open #sidebar:after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-moz-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.nav-items {
max-height: 100%;
position: relative;
overflow: auto;
bottom: 60px;
}
.mainmenu ul {
margin: 0;
}
.mainmenu ul li a {
padding: 0 40px;
width: 100%;
line-height: 60px;
display: inline-block;
color: #202020;
text-decoration: none;
}
.mainmenu ul li a :hover, .mainmenu ul li a .active {
background: #e1e1e1;
}
JavaScript
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button, #content').click(function() {
$('#nav-button').toggleClass('open');
$('body').toggleClass('sidebar-open');
return false;
});
});(jQuery);
Yes, I am using FontAwesome. :)

Your biggest issue that solves your original question is due to overflow: hidden; on .wrapper.
Here it is removed: DEMO. But that opens up a whole new world of problems. I advise you to go back and refactor your code.

Have you tried to empty your cache?
Ctrl-Shift-Del so your browser will reload your css.
Note: If this happens to your users, try changing the link to your css in your header like this:
<link rel="stylesheet" href="css/main.css?v=2">

Develop Reference

JavaScript is the programming language of the Web.

Make hamburger menu fadeout work - javascript

Related

sidebar navigation text not fixed while transition

I am trying to get my Javascript to cooperate and open my hamburger icon with my links inside

Responsive Navbar: Menu Not Disappearing (CSS and JS)

Jquery Click this or that and toggle class

Why are the CSS transforms not displayed?

Categories

Resources