Having an issue with a JS Hamburger Menu

Having an issue with a JS Hamburger Menu - javascript

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().

Related

location.href is not working, can't acess to link location

I've created a "loading page" which should be the first page that users see when they connect. It's a simple page with a central bouton that people have to click. Once they do, they access to the rest of the website. All the pages including the loading page are in the same folder. Each page of the site has its own : "XXXXX.html".
So I've created a loader.html page, and implemented a javascript function, that is here :
let introBox = document.getElementById('intro');
introBox.addEventListener('click', function(){
document.location.href = "main.html";
});
#keyframes sectionAnimation{
0%{
transform:scale(1);
}
50%{
transform:scale(1.5);
}
100%{
transform: scale(1);
}
}
html {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,*:before,*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: #fff;
padding: 0;
margin: 0;
height: auto;
width: 100%;
background-repeat: no-repeat;
& img{
width: 50%;
}
}
.loaderbody{
background-image: url('../../Assets/R.png');
}
b {
position: relative;
display: block;
font-family: helvetica neue, helvetica, sans-serif;
line-height: 1.15em;
margin-top: -1.15em;
top: 2.3em;
font-size: 0.67em;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.75;
text-align: center;
}
b span {
font-size: 0.785em;
font-weight: 400;
opacity: 0.4;
}
#intro {
width: 200px;
margin:auto;
margin-top:25%;
animation: sectionAnimation 1.5s both infinite;
transform:scale(1);
}
.button {
display: inline-block;
text-decoration: none;
position: relative;
margin-top: 40px;
}
.button .bottom {
position: absolute;
left: 7px;
top: 7px;
width: 100%;
height: 100%;
background-color: #2acdc1;
display: block;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button .top {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 24px 34px 22px 34px;
border: 2px solid #04049d;
}
.button-dark .top {
border: 2px solid #fff;
}
.button .top .label {
font-family: sans-serif;
font-weight: 600;
color: #04049d;
font-size: 12px;
line-height: 110%;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button-dark .top .label {
color: #fff;
}
.button:hover .bottom {
left: 0;
top: 0;
background-color: #f3f3f3;
}
.button:hover .top .label {
color: #2acdc1;
}
.button-border {
position: absolute;
background-color: #2acdc1;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.button:hover .top .button-border-left,.button:hover .top .button-border-right {
height: calc(100% + 2px);
}
.button:hover .top .button-border-top,.button:hover .top .button-border-bottom {
width: calc(100% + 2px);
}
.button-border-left {
left: -2px;
bottom: -2px;
width: 2px;
height: 0;
}
.button-border-top {
left: -2px;
top: -2px;
width: 0;
height: 2px;
}
.button-border-right {
right: -2px;
top: -2px;
width: 2px;
height: 0;
}
.button-border-bottom {
right: -2px;
bottom: -2px;
width: 0;
height: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../Css/main copie.css">
<title>TP</title>
</head>
<body class="loaderbody">
<script type="text/javascript" src="../Js/loader.js"></script>
<section id="intro">
<div id="intro-content" class="center-content">
<div class="center-content-inner">
<div class="content-section content-section-margin">
<div class="content-section-grid clearfix">
<a href="#" class="button nav-link">
<div class="bottom"></div>
<div class="top">
<div class="label">Let's go !</div>
<div class="button-border button-border-left"></div>
<div class="button-border button-border-top"></div>
<div class="button-border button-border-right"></div>
<div class="button-border button-border-bottom"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
The element "intro" is my bouton on my loading page. However, when I click on it, I stay on the same URL. I've noticed that when I click on the box it automatically add a "#" at the end of my URL. So I assume the function is kinda working, and my click is detected.
It seems the problem is about the .location.href but I can't get it.
Thank you so much.

There is a missing slash /, your code should look like this:
introBox.addEventListener('click', function(){
document.location.href = "/main.html";
});
If you want to redirect outside your website, you have to add double slash //.
document.location.href = "//google.com";
EDIT: The actual error is on the tag with href="#", change it to "/main.html".
You can remove the listener if you will, it's no longer needed.

Close the overlay fullscreen menu when anchor link is clicked

I am not good in Javascript, and I know this is very easy for some of you.
I adopted the overlay fullscreen menu from Codepen. I am trying to figured it out how I can close the overlay fullscreen menu when I clicked the anchor link.
snippet here
#import "http://webfonts.ru/import/notcourier.css";
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
can anyone help me to close the overlay fullscreen menu by adding javascript on the code?

$( ".target" ).click(function() {
$("#op").prop('checked', false);
});
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li><a class="target" href="#">Home</a></li>
<li><a class="target" href="#">About</a></li>
<li><a class="target" href="#">Work</a></li>
<li><a class="target" href="#">Clients</a></li>
<li><a class="target" href="#">Contact</a></li>
</ul>
</nav>
</div>

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 */
}
}

How can this menu be fixed so it can be responsive?

I have this menu: (the snippet is quite long), please look at the snippet in fullscreen...
$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 90%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translateX(-100%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
<div id="header">
<div class="header_logo">
JD
</div>
<div class="header_menu">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger">
</div>
</div>
</div>
It looks nice, but the problem is the smaller screens, it covers the logo and burger, i had an idea for smaller screens to be like this:
but i don't know how to achieve this, maybe i have some mistakes in code, or my concept is wrong.... Please help.

$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('.header_menu').toggleClass('hidden');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 90%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translateX(-100%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
#media (max-width: 700px) {
.hidden {
display: none;
}
.header_menu {
min-height: 200px;
width: 100%;
top: 64px;
}
.burger {
background-color: #000;
}
#menu li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
<div id="header">
<div class="header_logo">
JD
</div>
<div class="header_menu hidden">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger">
</div>
</div>
</div>

You can achieve this, using bootstrap library. Try like this , hope it will help.
$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('.header_menu_sm').toggleClass('is_open');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.hidden-lg.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.hidden-lg.open:before {
border-bottom: 5px solid #000;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.hidden-lg.open:after {
border-bottom: 5px solid #000;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 100%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translate(-90%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
.header_menu_sm {
width: 90%;
position: absolute;
background: #000;
margin-top: 10%;
right: 0;
left: 100%;
height: auto;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu_sm.is_open {
transform: translate(-100%,15%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu_sm {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
top: 50%;
left: 100%;
transform: translateY(0%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu_sm.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu_sm li {
list-style: none;
display: block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
#menu_sm li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div class="header_logo ">
JD
</div>
<div class="header_menu hidden-md hidden-xs hidden-sm">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger hidden-md hidden-xs hidden-sm">
</div>
<div class="burger hidden-lg hidden-xl">
</div>
</div>
</div>
<div class="header_menu_sm hidden-lg hidden-xl">
<span>MENU</span>
<ul id="menu_sm">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Having an issue with a JS Hamburger Menu - javascript

Related

location.href is not working, can't acess to link location

Close the overlay fullscreen menu when anchor link is clicked

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

How can I make my navbar completely responsive?

How can this menu be fixed so it can be responsive?

Categories

Resources