collapse and expand multiple boxes - javascript

I'm using below collapse/expand code. it's work, but when I use the code to another text both are expand at the same time. For example, the below "+" icon I clicked on the first one the box expand and in the same time the second box expand without clicking in the icon.
please advise me.
here is the code:
$(".js-expand").click(function () {
$(".js-expand").toggleClass('is-expanded');
$(".figcaption").toggleClass('is-expanded');
});
.wrapper {
position: relative;
width: 330px;
top: 40%;
}
.figcaption {
position: absolute;
top: 50%;
left: 1%;
z-index: 4;
background: #84BD00 !important;
width: 30px;
height: auto;
max-height: 30px;
border-radius: 50%;
max-width: 220px;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.3);
transition: all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 0.5s;
}
.figcaption:before {
display: block;
position: absolute;
width: 0;
height: 0;
bottom: 99.5%;
left: 0;
content: '';
z-index: 3;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #84BD00;
overflow: hidden;
transform: translateY(100%);
transition: all 0.75s;
transition-delay: 0.5s;
}
.figcaption.is-expanded {
top: 50%;
left: 1%;
width: 300px;
max-height: 1000px;
border-radius: 0;
max-width: 300px;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.3);
transition-delay: 0s;
}
.figcaption.is-expanded:before {
left: 30px;
transform: translateY(0%);
transition-delay: 0s;
}
.figcaption-icon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 1%;
width: 30px;
height: 30px;
font-size: 18px;
z-index: 5;
color: #fff;
transform: rotate(0deg);
cursor: pointer;
border-radius: 50%;
transition: all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 0.5s;
}
.figcaption-icon.is-expanded {
left: 80%;
transform: rotate(405deg);
transition-delay: 0s;
}
.caption-title {
font-family: sans-serif;
position: relative;
background: #323232;
color: #fff;
text-transform: uppercase;
display: inline-block;
padding: 5px 7.5px;
margin-bottom: 10px;
transform: translateX(-15px) translateY(10px);
opacity: 0;
white-space: nowrap;
transition: all 0.5s;
transition-delay: 0s;
}
.figcaption.is-expanded .caption-title {
opacity: 1;
white-space: nowrap;
transition-delay: 0.5s;
}
.caption-copy-wrap {
opacity: 0;
overflow: hidden;
max-height: 1000px;
transition: all 0.5s;
transition-delay: 0s;
background: #84BD00 !important;
border: none;
}
.figcaption.is-expanded .caption-copy-wrap {
opacity: 1;
white-space: normal;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 0.5s;
}
.caption-copy {
font-family: sans-serif;
margin: 0;
padding: 10px 20px 20px 20px;
font-size: 0.875rem;
line-height: 1.28571429;
text-align: justify;
}
li {
margin-bottom: 10px;
color: black;
}
<div class="col-lg-3 col-sm-3">
<div class="form-group">
<label class="bmd-label-floating">Primary Hazards</label>
<div class="wrapper">
<span class="figcaption-icon js-expand" title="Primary Hazards">&plus;</span>
<figcaption class="figcaption">
<div class="caption-title">Primary Hazards</div>
<div class="caption-copy-wrap">
<div class="form-control" data-toggle="collapse" data-target="#txtP4" contenteditable="false" disabled id="txtP4" style="background: #84BD00 !important; border: none;">
<ul class="caption-copy">
<li>Unsafe working area</li>
<li>Personal Injury </li>
<li>Not conducting the joint site inspection </li>
<li>Expire receiver/ issuer certificate </li>
<li>EWrong equipment might be selected </li>
<li>Miss communication </li>
</ul>
</div>
</div>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="form-group">
<label class="bmd-label-floating">Primary Hazards</label>
<div class="wrapper">
<span class="figcaption-icon js-expand" title="Primary Hazards">&plus;</span>
<figcaption class="figcaption">
<div class="caption-title">Primary Hazards</div>
<div class="caption-copy-wrap">
<div class="form-control" data-toggle="collapse" data-target="#txtP4" contenteditable="false" disabled id="txtP4" style="background: #84BD00 !important; border: none;">
<ul class="caption-copy">
<li>Unsafe working area</li>
<li>Personal Injury </li>
<li>Not conducting the joint site inspection </li>
<li>Expire receiver/ issuer certificate </li>
<li>EWrong equipment might be selected </li>
<li>Miss communication </li>
</ul>
</div>
</div>
</figcaption>
</div>
</div>
</div>


you can add the below code for your jquery function
$('.js-expand').each(function() {
$(this).on('click', function() {
$(this).next().toggleClass('is-expanded')
});
})

Related

Hambuger menu does not respond when clicked (HTML/CSS/JS)

Creating a basic HTML/CSS webpage. I added some CSS and JavaScript features so that the hamburger menu icon could be clicked and show a sidebar. After implementing JavaScript, the sidebar no longer shows on screen (which was what I wanted), but now the hamburger menu icon is unresponsive and does not reveal the sidebar. I looked over my HTML and CSS but could not find the problem. My code matches the source code of the guide I am following. Any help would be greatly appreciated.
HTML:
<!DOCTYPE html>
<html lang="en"
<head>
<meta charset="UTF-8:">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Placeholder</title>
<link rel="stylesheet" href="stylesheet2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="ThinkDirBackground1.jpg" />
</div>
<div class="banner">
<h1>Placeholder</h1>
<p>Placeholder <br>
<em>placeholder</em> <br>
1. Placeholder <br>
2. Placeholder<br>
</p>
<button>Placeholder</button>
</div>
</header>
<section class="sidebar">
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-link"
data-content="Home">Home</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH2">PH2</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH3">PH3</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH4">PH4</a>
</li>
</ul>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
font-size: 62.5%;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: right 0.7s;
}
.change .hamburger-menu {
right: 33rem;
}
.line {
width: 100%;
height: .2rem;
background-color: #FFFFFF;
box-shadow: 0.1rem 0.2rem rgba(0,0,0, .2);
}
.line {
background-color: rgba(0,0,0, .8);
}
.change .line-1 {
transform: rotate(45deg)
translate(0.3rem, 0.8rem);
}
.change .line-2 {
opacity: 0;
visibility: hidden;
}
.change .line-3 {
transform: rotate(-45deg)
translate(0.3rem, -0.8rem);
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation-name: scale;
animation-duration: 25s;
filter: blur(8px);
-webkit-filter: blur(8px);
}
#keyframes scale {
0% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.banner {
position: absolute;
top: 30%;
left: 15%;
}
.banner h1 {
font-family: "Sans-serif";
font-size: 9rem;
font-weight: 300;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0 .3rem .5rem rgba(0,0,0, .4);
opacity: 0;
animation: moveBanner 1s .5s;
animation-fill-mode: forwards;
}
.banner p {
font-family: "Sans-serif";
font-size: 2.5rem;
color: #FFFFFF;
width: 70%;
text-shadow: 0 .3rem .5rem rgba(0,0,0, .4);
margin-bottom: 3rem;
opacity: 0;
animation: moveBanner 1s .7s;
animation-fill-mode: forwards;
}
.banner button {
width: 20rem;
height: 5rem;
background-color: #FFFFFF;
border: none;
font-family: "Sans-serif";
text-transform: uppercase;
text-shadow: 0.2rem .2rem rgba(0,0,0, 0.2);
box-shadow: 0.3rem .5rem rgba(0,0,0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s;
animation-fill-mode: forwards;
}
#keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #FFFFFF;
transition: right .5s;
}
.change .sidebar {
right: 0;
}
.menu {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-item {
text-align: center;
margin: 0 0 40px 0;
}
.menu-link {
font-family: "Sans-serif";
font-size: 4rem;
color: #555;
position: relative;
}
.menu-link::before {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
color: #555;
overflow: hidden;
white-space: nowrap;
transition: width .3s ease-in-out;
}
.menu-link:hover::before {
width: 100%;
}
.social-media {
position: absolute;
bottom: 3rem;
width: 100%;
display: flex;
justify-content: center;
}
.social-media i {
font-size: 2.2rem;
margin: 3rem;
width: 4.5rem;
height: 4.5rem;
background-color: #777;
color: #FFF;
isplay: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.social-media i:hover {
background-color: #c29525;
}
JavaScript
document.querySelector('.hamburger-menu').
addEventListener('click, () => {
document.querySelector('container').classlist.toggle('change')
});

Few things:
You are missing a closing bracket here: addEventListener('click,
classlist should be classList, JS properties are case-sensitive
document.querySelector('container') is looking for the first container element. Use document.querySelector('.container') to get the first element with the class container
document.querySelector('.hamburger-menu').addEventListener('click', () => {
document.querySelector('.container').classList.toggle('change')
});
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
font-size: 62.5%;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: right 0.7s;
}
.change .hamburger-menu {
right: 33rem;
}
.line {
width: 100%;
height: .2rem;
background-color: #FFFFFF;
box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, .2);
}
.line {
background-color: rgba(0, 0, 0, .8);
}
.change .line-1 {
transform: rotate(45deg) translate(0.3rem, 0.8rem);
}
.change .line-2 {
opacity: 0;
visibility: hidden;
}
.change .line-3 {
transform: rotate(-45deg) translate(0.3rem, -0.8rem);
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation-name: scale;
animation-duration: 25s;
filter: blur(8px);
-webkit-filter: blur(8px);
}
#keyframes scale {
0% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.banner {
position: absolute;
top: 30%;
left: 15%;
}
.banner h1 {
font-family: "Sans-serif";
font-size: 9rem;
font-weight: 300;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .4);
opacity: 0;
animation: moveBanner 1s .5s;
animation-fill-mode: forwards;
}
.banner p {
font-family: "Sans-serif";
font-size: 2.5rem;
color: #FFFFFF;
width: 70%;
text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .4);
margin-bottom: 3rem;
opacity: 0;
animation: moveBanner 1s .7s;
animation-fill-mode: forwards;
}
.banner button {
width: 20rem;
height: 5rem;
background-color: #FFFFFF;
border: none;
font-family: "Sans-serif";
text-transform: uppercase;
text-shadow: 0.2rem .2rem rgba(0, 0, 0, 0.2);
box-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s;
animation-fill-mode: forwards;
}
#keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #FFFFFF;
transition: right .5s;
}
.change .sidebar {
right: 0;
}
.menu {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-item {
text-align: center;
margin: 0 0 40px 0;
}
.menu-link {
font-family: "Sans-serif";
font-size: 4rem;
color: #555;
position: relative;
}
.menu-link::before {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
color: #555;
overflow: hidden;
white-space: nowrap;
transition: width .3s ease-in-out;
}
.menu-link:hover::before {
width: 100%;
}
.social-media {
position: absolute;
bottom: 3rem;
width: 100%;
display: flex;
justify-content: center;
}
.social-media i {
font-size: 2.2rem;
margin: 3rem;
width: 4.5rem;
height: 4.5rem;
background-color: #777;
color: #FFF;
isplay: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.social-media i:hover {
background-color: #c29525;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8:">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Placeholder</title>
<link rel="stylesheet" href="stylesheet2.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="ThinkDirBackground1.jpg" />
</div>
<div class="banner">
<h1>Placeholder</h1>
<p>Placeholder <br>
<em>placeholder</em> <br> 1. Placeholder <br> 2. Placeholder<br>
</p>
<button>Placeholder</button>
</div>
</header>
<section class="sidebar">
<ul class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
PH2
</li>
<li class="menu-item">
PH3
</li>
<li class="menu-item">
PH4
</li>
</ul>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

Press f12 go to Developer mode, check the console.if there has questions,solve them.
You can Single-step debugging in the source page,Network interaction in the network page

Is there a way to close my active navbar wherever I click on screen?

I made a working desktop navbar (it looks like Apple's), but I don't know how can I make it close wherever I click on screen to search-bar when the search bar is active. I googled everything but nothing seem to work, also did an inspect element on Apple.com, but nothing seem to work. Also did some jquery, not even that. I don't have any assumptions for what it could be wrong.Here is my code.
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu').addEventListener('click', () => {
selectElement('header').classList.toggle('active');
});
function navbar(){
document.querySelector('html').style.transition = ".2s"
document.querySelector('html').style.background = "rgba(0,0,0,0.5)"
}
function navbarRemove(){
document.querySelector('html').style.transition = "0"
document.querySelector('html').style.background = "none"
document.getElementById("nav-link").style.transform = "scale(1)";
}
```
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: 'SF Pro Display', sans-serif;
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -0.5rem;
}
.nav-list-mobile{
display: none;
}
.nav-link{
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link:hover{
opacity: .7;
}
.nav-link.hide-item{
transform: scale(0);
transition: .5s;
}
.nav-link.active{
transition: .5s;
transform: scale(1);
}
.n1.active{
transition-delay: 0.0005s!important;
}
.n2.active{
transition-delay: 0.0025s!important;
}
.n3.active{
transition-delay: 0.005s!important;
}
.n4.active{
transition-delay: 0.025!important;
}
.n5.active{
transition-delay: 0.05s!important;
}
.n6.active{
transition-delay: 0.1s!important;
}
.n7.active{
transition-delay: 0.15s!important;
}
.n8.active{
transition-delay: 0.2s!important;
}
.n9.active{
transition-delay: 0.25s!important;
}
.n10.active{
transition-delay: 0.3s!important;
}
.n10{
transition-delay: 0.0005s!important;
}
.n9{
transition-delay: 0.0025s!important;
}
.n8{
transition-delay: 0.005s!important;
}
.n7{
transition-delay: 0.025!important;
}
.n6{
transition-delay: 0.05s!important;
}
.n5{
transition-delay: 0.1s!important;
}
.n4{
transition-delay: 0.15s!important;
}
.n3{
transition-delay: 0.2s!important;
}
.n2{
transition-delay: 0.25s!important;
}
.n1{
transition-delay: 0.3s!important;
}
.nav-link-apple{
width: 1.6rem;
height: 3.5rem;
background: url("img/apple.svg") center no-repeat;
}
.nav-link-search{
width: 1.6rem;
height: 4.4rem;
background: url("img/search.svg") center no-repeat;
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link-search:hover{
opacity: .7;
}
.nav-link-bag{
width: 1.4rem;
height: 4.4rem;
background: url("img/bag.svg") center no-repeat;
}
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
transition: .6s;
}
.searchbox.active{
opacity: 1;
visibility: visible;
transition-delay: .6s;
transform: translate(-50%, -45%);
}
.searchbox input{
width: 100%;
height: 44px;
background: transparent;
outline: none;
border: none;
color: #fff;
font-size: 18px;
}
.searchbox input:focus{
outline: none;
border: none;
}
.close-btn{
opacity: .7;
transition: .5s;
}
.close-btn-left{
position: absolute;
margin-top: 2rem;
transform: rotate(45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn-right{
position: absolute;
margin-top: 2rem;
transform: rotate(-45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn:hover{
opacity: 1.6;
}
.confirm{
width: 18px;
height: 18px;
background: url("img/idkv2.svg") center no-repeat;
font-size: 1.4rem;
fill: #e4e1e1;
border: none;
outline: none;
transform: translate(-160%, 180%);
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),
height .56s cubic-bezier(0.32, 0.08, 0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.v2{
display: none;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.line-top{
margin-top: 4px;
}
.line-bottom{
margin-top: -.8rem;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
header.active{
height: 100%;
background-color: #000;
}
.nav-link-apple{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 1.6rem;
height: 4.8rem;
transition: opacity 1.5s;
}
.nav{
position: relative;
}
.nav-link{
font-size: 1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: flex-start;
border-bottom: 2px solid rgba(255,255,255,.1);
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn .5s ease-in-out;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
#keyframes appear {
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubing Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- nav list nav mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class=" nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item" >
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item v2">
</li>
<li class="searchbox" id="searchbox">
<form>
<button class="confirm" disabled></button>
<input type="text" class="search" id="box" placeholder="Search here" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
<span class="close-btn" onclick="navbarRemove();">
<span class="close-btn-left"></span>
<span class="close-btn-right"></span>
</span>
</form>
</li>
</ul>
<!-- nav list nav mobile -->
</nav>
</div>
</header>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').click(function(){
$('.nav-link').addClass('hide-item')
$('.searchbox').addClass('active')
$('.nav-link').removeClass('active')
$('.search').focus();
})
$('.close-btn').click(function(){
$('.nav-link').removeClass('hide-item')
$('.searchbox').removeClass('active')
$('.nav-link').addClass('active')
})
})
</script>
</body>
</html>
Help would be really appreciated.

Don't know why, but straight focus() not working, probably because of visibility: hidden.
But, if you add setTimeout it works great and smooth, check it on JSFiddle

After testing this, it looks to me like the .focus() is calling before the input is visible again, due to the transition-delay css rule on .searchbox.active. You can try one of two things and they both worked for me:
Delay the focus:
setTimeout(function(){
$('.search').focus();
}, 1000);
Or remove the visibility: hidden; css rule from .searchbox input {}.
.searchbox {
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
/* visibility: hidden; */
transition: .6s;
}
.searchbox.active {
opacity: 1;
/* visibility: visible; */
transition-delay: .6s;
transform: translate(-50%, -45%);
}

How can I make my navbar completely responsive?

I recently made an Apple navbar, but I have some trouble with getting it to be responsive. https://codepen.io/51LV3R/pen/OJRxNdj is link for the navbar. The searchbar which is supposed to be in the center transforms after I close it on a mobile device. Does anyone know how can I fix that? As you can see at the bottom of the HTML code, I tried using jQuery. Also, can I add HTML elements through DOM wherever I want? Because I want on click to searchbar to show the button 'cancel' much like the Apple one does. Thanks for help. https://www.apple.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubing Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- nav list nav mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class=" nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item" >
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item v2">
</li>
<li class="searchbox" id="searchbox">
<form>
<button class="confirm" disabled></button>
<input type="text" class="search" id="box" placeholder="Search here" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
<span class="close-btn" onclick="navbarRemove();">
<span class="close-btn-left"></span>
<span class="close-btn-right"></span>
</span>
</form>
</li>
</ul>
<!-- nav list nav mobile -->
</nav>
</div>
</header>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('html').width() <= 767) {
$('#search').click(function(){
$('.nav-link').addClass('hide-item')
$('.searchbox').addClass('active')
$('.nav-link').removeClass('activev2')
})
$('.close-btn').click(function(){
$('.nav-link').removeClass('hide-item')
$('.searchbox').removeClass('active')
$('.nav-link').addClass('activev2')
})
}else{
}
})
</script>
</body>
</html>
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: 'SF Pro Display', sans-serif;
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -0.5rem;
}
.nav-list-mobile{
display: none;
}
.nav-link{
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link:hover{
opacity: .7;
transition: .3s!important;
}
.nav-link.hide-item{
transform: scale(0);
transition: .5s;
}
.nav-link.activev2{
transition: .5s;
transform: scale(1);
}
.nav-link.activev2:hover{
transition: .3s!important;
}
.n1.activev2{
transition-delay: 0.0005s!important;
}
.n2.activev2{
transition-delay: 0.0025s!important;
}
.n3.activev2{
transition-delay: 0.005s!important;
}
.n4.activev2{
transition-delay: 0.025!important;
}
.n5.activev2{
transition-delay: 0.05s!important;
}
.n6.activev2{
transition-delay: 0.1s!important;
}
.n7.activev2{
transition-delay: 0.15s!important;
}
.n8.activev2{
transition-delay: 0.2s!important;
}
.n9.activev2{
transition-delay: 0.25s!important;
}
.n10.activev2{
transition-delay: 0.3s!important;
}
.n10{
transition-delay: 0.0005s!important;
}
.n9{
transition-delay: 0.0025s!important;
}
.n8{
transition-delay: 0.005s!important;
}
.n7{
transition-delay: 0.025!important;
}
.n6{
transition-delay: 0.05s!important;
}
.n5{
transition-delay: 0.1s!important;
}
.n4{
transition-delay: 0.15s!important;
}
.n3{
transition-delay: 0.2s!important;
}
.n2{
transition-delay: 0.25s!important;
}
.n1{
transition-delay: 0.3s!important;
}
.nav-link-apple{
width: 1.6rem;
height: 3.5rem;
background: url("img/apple.svg") center no-repeat;
}
.nav-link-search{
width: 1.6rem;
height: 4.4rem;
background: url("img/search.svg") center no-repeat;
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link-search:hover{
opacity: .7;
}
.nav-link-bag{
width: 1.4rem;
height: 4.4rem;
background: url("img/bag.svg") center no-repeat;
}
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
transition: .6s;
}
.searchbox.active{
opacity: 1;
visibility: visible;
transition-delay: .6s;
transform: translate(-50%, -45%);
}
.searchbox input{
width: 100%;
height: 44px;
background: transparent;
outline: none;
border: none;
color: #fff;
font-size: 18px;
}
.searchbox input:focus{
outline: none;
border: none;
}
.close-btn{
opacity: .7;
transition: .5s;
}
.close-btn-left{
position: absolute;
margin-top: 2rem;
transform: rotate(45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn-right{
position: absolute;
margin-top: 2rem;
transform: rotate(-45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn:hover{
opacity: 1.6;
}
.confirm{
width: 18px;
height: 18px;
background: url("img/idkv2.svg") center no-repeat;
font-size: 1.4rem;
fill: #e4e1e1;
border: none;
outline: none;
transform: translate(-160%, 180%);
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),
height .56s cubic-bezier(0.32, 0.08, 0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.v2{
display: none;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.line-top{
margin-top: 4px;
}
.line-bottom{
margin-top: -.8rem;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
header.active{
height: 100%;
background-color: #000;
}
.nav-link-apple{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 1.6rem;
height: 4.8rem;
transition: opacity 1.5s;
}
.nav{
position: relative;
}
.nav-link{
font-size: 1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: flex-start;
border-bottom: 2px solid rgba(255,255,255,.1);
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn .5s ease-in-out;
}
.close-btn{
display: none;
}
.n9{
display: none;
}
.searchbox{
display: flex;
justify-content: center;
align-items: center;
margin-top: 8rem;
opacity: 1;
visibility: visible;
background: #1D1D1F;
height: 40px;
border-radius: 4px;
width: 400px;
transition: none;
}
.searchbox-active{
display: none;
opacity: 0;
visibility: none;
transform: translate(0)!important;
transition: none;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
#keyframes appear {
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu').addEventListener('click', () => {
selectElement('header').classList.toggle('active');
});
function navbar(){
document.querySelector('html').style.transition = ".2s"
document.querySelector('html').style.background = "rgba(0,0,0,0.5)"
setTimeout(()=> {
document.querySelector('#box').focus()
}, 1000)
}
function navbarRemove(){
document.querySelector('html').style.transition = "0"
document.querySelector('html').style.background = "none"
document.getElementById("nav-link").style.transform = "scale(1)";
}

Like I said the problem was in transitions.
Remove the transition option of .6s from .searchbox in general css and add 1s transition in media queries where max-width: 767px. See the codepen: https://codepen.io/codeweapon/pen/oNzGLZB
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
/* transition: .6s; */
}
#media screen and (max-width: 767px){
.searchbox{
display: flex;
justify-content: center;
align-items: center;
margin-top: 8rem;
opacity: 1;
visibility: visible;
background: #1D1D1F;
height: 40px;
border-radius: 4px;
width: 400px;
transition: 1s; /*add transition of 1s */
}
}

I wonder why i can't add picture to the .img class (through the css) and why the sign up button wont change to sign in when i click it [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I follow this youtube tutorial (https://www.youtube.com/watch?v=sy9OI-ndKnc). I don't understand HTML, CSS, and JS that much (to be honest i had no experience in it), but I really need this page to work. I think the .img-btn span.m-in should be the one responsible to translate the button when it get clicked(?).
document.querySelector('.img-btn').addEventListener('click', function()
{
document.querySelector('.cont').classList.toggle('s-signup')
}
);
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700;800&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
*, *:before, *:after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.heading li,a,button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10%;
background-color: #000000;
}
.heading .logo{
cursor: pointer;
height: 80px;
width: 80px;
transition: all 0.3s ease 0s;
-webkit-transition: image 0.2s ease-in-out;
transition: image 0.2s ease-in-out;
}
.navigation{
list-style: none;
}
.navigation li{
display: inline-block;
padding: 0px 20px;
}
.navigation li a{
transition: all 0.3s ease 0s;
}
.navigation li a:hover{
color: #0088a9;
}
.heading button{
padding: 9px 25px;
background-color: rgb(224, 173, 19);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.heading button:hover{
background-color: rgba(0,136,168,0.8);
}
.joinus{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: -webkit-linear-gradient(left, #000000, #FF0000);
font-family: 'Nunito', sans-serif;
}
.joinus input, button{
border: none;
outline: none;
background: none;
}
.cont{
overflow: hidden;
position: relative;
width: 900px;
height: 550px;
background: #fff;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.form{
position: relative;
width: 640px;
height: 100%;
padding: 50px 30px;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.joinus h2{
width: 100%;
font-size: 30px;
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus label{
display: block;
width: 260px;
margin: 25px auto;
text-align: center;
}
.joinus label span{
font-size: 14px;
font-weight: 600;
color: #505f75;
text-transform: uppercase;
font-family: 'Nunito', sans-serif;
}
.joinus input{
display: block;
width: 100%;
margin-top: 5px;
font-size: 16px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(109, 93, 93, 0.4);
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus button{
display: block;
margin: 0 auto;
width: 260px;
height: 36px;
border-radius: 50px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.submit{
margin-top: 40px;
margin-bottom: 30px;
text-transform: uppercase;
font-weight: 600;
font-family: 'Nunito', sans-serif;
background-color: rgb(224, 173, 19);
}
.submit:hover{
background-color: rgba(0,136,168,0.8);
}
.forgot-pass{
margin-top: 15px;
text-align: center;
font-size: 14px;
font-weight: 600px;
color: #0c0101;
cursor: pointer;
}
.forgot-pass:hover{
color: rgba(0,136,168,0.8);
}
.social-media{
width: 100%;
text-align: center;
margin-top: 20px;
}
.social-media ul{
list-style: none;
}
.social-media ul li{
display: inline-block;
cursor: pointer;
margin: 25px 15px;
}
.social-media img{
width: 40px;
height: 40px;
}
.sub-cont{
overflow: hidden;
position: absolute;
left: 640px;
top: 0;
width: 900px;
height: 100%;
padding-left: 260px;
background: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
}
.cont.s-signup .sub-cont{
-webkit-transform: translate3d(-640px, 0, 0);
transform: translate3d(-640px, 0, 0);
}
.img{
overflow: hidden;
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-image: url(img/alex.jpg);
background-size: cover;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
}
.cont .s-signup .img:before{
-webkit-transform: translate3d(640px, 0, 0);
transform: translate3d(640px, 0, 0);
}
.img-text{
z-index: 2;
position: absolute;
left: 0;
top: 50px;
width: 100%;
padding: 0 20px;
text-align: center;
color: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img-text h2{
margin-bottom: 10px;
font-weight: normal;
}
.img-text p{
font-size: 14px;
line-height: 1.5;
}
.cont.s-signup .img-text.m-up{
-webkit-transform: translateX(520px);
transform: translateX(520px);
}
.img-text.m-in{
-webkit-transform: translateX(-520px);
transform: translateX(-520px);
}
.cont.s-signup .img-text.m-in{
-webkit-transform:translateX(0);
transform:translateX(0);
}
.sign-in{
padding-top: 65px;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.cont.s-signup .sign-in{
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 1.2s;
transition-duration: 1.2s;
-webkit-transform: translate3d(640px, 0 , 0);
transform: translate3d(640px, 0 , 0);
}
.img-btn{
overflow: hidden;
z-index: 2;
position: relative;
width: 100px;
height: 36px;
margin: 0 auto;
background: transparent;
color: #fff;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
}
.img-btn:after{
content: '';
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 50px;
}
.img-btn span{
position: absolute;
left: 0;
top: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.2s;
transition: -webkit-transform 1.2s;
transition: transform 1.2s;
transition: transform 1.2s, -webkit-transform 1.2s;
}
.img-btn span.m-in{
-webkit-transform: translateY(-72px);
transform: translateY(-72px);
}
.sign-up{
-webkit-transform: translate3d(-900px, 0 ,0);
transform: translate3d(-900px, 0, 0);
}
.cont.s-signup .sign-up{
-webkit-transform: translate3d(0, 0 ,0);
transform: translate3d(0, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join us</title>
<link rel="stylesheet" type="text/css" href="style/joinus.css">
</head>
<body>
<section class="heading">
<header>
<img class="logo" src="img/logo_csc.png" alt="logo">
<nav>
<ul class="navigation">
<li>Home</li>
<li>About us</li>
<li>Research</li>
<li>Our Achievement</li>
</ul>
</nav>
<div>
<button>Join us</button>
</div>
</header>
</section>
<section class="joinus">
<div class="cont">
<div class="form sign-in">
<h2>Sign In</h2>
<label>
<span>Email Address</span>
<input type="email" name="email">
</label>
<label>
<span>Password</span>
<input type="password" name="password">
</label>
<button class="submit" type="button">Sign In</button>
<p class="forgot-pass">Forgot Password?</p>
<div class="social-media">
<ul>
<li><img src="img/instagram.png"></li>
<li><img src="img/youtube.png"></li>
</ul>
</div>
</div>
<div class="sub-cont">
<div class="img">
<div class="img-text m-up">
<h2>New activist?</h2>
<p>Sign up here!</p>
</div>
<div class="img-text m-in">
<h2>Already an activist?</h2>
<p>If you already has an account, sign in here!.</p>
</div>
<div class="img-btn">
<span class="m-up">Sign Up</span>
<span class="m-in">Sign In</span>
</div>
</div>
<div class="form sign-up">
<h2>Sign Up</h2>
<label>
<input type="text" placeholder="Full Name...">
</label>
<label>
<input type="email" placeholder="Email...">
</label>
<label>
<input type="text" placeholder="Majors...">
</label>
<label>
<input type="password" placeholder="Password...">
</label>
<label>
<input type="password" placeholder="Confirm Password...">
</label>
<button type="button" class="submit">Sign Up Now</button>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="script/register.js"></script>
</body>
</html>

Working Codepen https://codepen.io/thisisloop/pen/xxwadPp
I had to add these two codes to the CSS File:
.cont.s-signup .img-btn span.m-in{
-webkit-transform: translateY(0);
transform: translateY(0);
}
.cont.s-signup .img-btn span.m-up{
-webkit-transform: translateY(72px);
transform: translateY(72px);
}
For the image, you need to add quotation marks
instead of:
background-image: url(img/alex.jpg);
do
background-image: url('img/alex.jpg');
I couldnt add it to the codepen, because codepen doesnt allow file upload for free users.

Having an issue with a JS Hamburger Menu

Added a Hamburger Menu to our site. There are no console log errors and the menu refuses to expand.
The page in question - https://www.harpercollege.edu/foundation/alumni-dev/index.php
The Code Pen I'm working from - https://codepen.io/anon/pen/vQNmgx
Everything works fine in codepen and visually it looks fine in the live site. I just can click or expand. The goal is to be able to expand the menu and push over the rest of the page.
{HTML}
<body>
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<li class="block">Home</li>
<li class="block">Profile</li>
<li class="block">Blogs</li>
<li class="block">Following</li>
<li class="block">Settings</li>
<li class="block">Logout</li>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<p class="hello-text">hello</p>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
</body>
{JS}
$(".hamburger").on("click", function(){
$(".hamburger").toggleClass("is-active");
$('body').toggleClass('menu-active');
$(".side-nav").toggleClass("hidden");
if($("#side").hasClass("is-active")){
$("#main").toggleClass("hidden");
} else if(!$("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
}
});
{CSS}
html,body{
padding: 0;
margin: 0;
height: 100%;
background-color: black;
box-sizing: border-box;
}
button:focus {outline:0;}
a{
color: #fff;
}
a:hover{
color: #fff;
text-decoration: none;
}
.side-nav{
position: absolute;
background-color: gray;
width: 300px;
height: 100%;
z-index: 1;
right: 0;
}
.open-menu-side{
position: relative;
display: block;
height: 80px;
width: 100%;
text-align: center;
float: right;
}
.side-nav-ul{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
list-style: none;
font-size: 28px;
color: #fff;
}
.block{
height: 40px;
}
header{
height: 80px;
background-color: #fff;
}
.brand{
display: inline-block;
}
.img-menu img{
height: 50px;
width: 50px;
border-radius: 50%;
border: solid 1px black;
float: left;
}
.hidden{
position: absolute;
right: -300px;
}
#pushed{
position: relative;
}
#main{
float: right;
}
.hamburger {
padding: 15px 15px;
height: 100%;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative; }
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hello-text{
text-align: right;
color: #fff;
font-size: 22px;
}
body.menu-active{
padding-right: 300px;
}

You've put the script which adds the click handler in your document's head. At the point that the script is loaded, $('.hamburger') doesn't exist in the DOM, so the click handler is not added, therefore the clicks have no effect.
To fix, consider moving the script to the bottom of the page, or wrapping it in $(document).ready().

Categories