We Keep Coding

Why preloader is showing header section

I am currently working on a website cloning project in order to practice HTML5 and become a better front end developer, so I created a preload animation using CSS. It works fine, but the header section, which includes the navigation and logo, is not hidden. How can I fix this? Is there anything wrong with my code?
$(window).on("load", function() {
$('.spinner').fadeOut(300);
$("body").addClass("pageloaded");
});
:root {
--primary-color:#0071ce;
--secondary-color:#ffffff;
}
body{
min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
font-family: 'ProximaNova-Semibold', Courier, monospace;
text-transform: uppercase;
color: var(--primary-color);
display: block;
font-size: 1.2rem;
}
.navbar-custom{
padding: 25px;
padding-left: 25px;
}
.navbar-custom a:hover{
text-decoration: underline;
color: var(--primary-color);
}
#nav-icons {
width: 35px;
height: 45px;
position: relative;
margin: 6px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
cursor: pointer;
}
#nav-icons span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: blue;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
top: 0px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(2) {
top: 11px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(3) {
top: 21px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
left: 2px;
}
#nav-icons.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icons.open span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 10px;
left: 4px;
}
#media (max-width: 767.98px) {
.navbar-custom{
padding: 0px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-collapse{
display: block;
position: absolute;
width: 150vw;
height: 150vh;
left: 0;
top: 0;
background: rgba(255, 232, 73, 0.95);
z-index: 2;
}
#nav-icons{
z-index: 3;
}
.navbar-collapse .navbar-nav{
padding-top: 120px;
padding-left: 30px;
}
.navbar-collapse .navbar-nav {
-webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
.navbar-collapse .navbar-nav li:nth-child(1) {
animation-delay: 0.1s;
}
.navbar-collapse .navbar-nav li:nth-child(2) {
animation-delay: 0.2s;
}
.navbar-collapse .navbar-nav li:nth-child(3) {
animation-delay: 0.3s;
}
}
/* top section */
.topsec{
position: relative;
padding-top: 165px;
}
.topsec h1{
font-family: ProximaNova-Extrabld;
font-size: 3rem;
text-transform: uppercase;
color: var(--primary-color);
line-height: 1;
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
/* restaurants */
.restaurants-section{
background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
background-size: cover;
background-position: top center;
padding: 10rem 0;
display: block;
width: 100%;
}
.restaurants-text{
padding-top: 100px;
}
.restaurants h3{
font-size: 40px;
font-family: "ProximaNova-Semibold",sans-serif;
color: #fff;
}
.restaurants p{
font-size: 1rem;
margin: 0rem 0 1rem;
line-height: 150%;
color: white;
}
.restaurants a{
display: inline-block;
padding: 5px 25px;
background: #0071ce;
color: #ffe800;
font-size: 20px;
font-family: "ProximaNova-Bold",sans-serif;
transition: all 0.3s;
text-decoration: none;
}
.restaurants a:hover{
background: #ffe800;
color: #0071ce;
transition: all 0.3s;
text-decoration: underline;
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sk-three-bounce {
margin: 40px auto;
width: 10rem;
text-align: center;
margin-top: 48vh;
}
.sk-three-bounce .sk-child {
width: 1.5rem;
height: 1.5rem;
background-color: #0071ce;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce4 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
background-color: #0071ce;
}
.section-spinner {
position: fixed;
height: 100%;
width: 100%;
background: #FFFFFF;
top: 0;
left: 0;
z-index: 999;
}
.section-spinner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
<title>|Welcome to my website </title>
<link rel="stylesheet" href="./css/style.css">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="section-spinner spinner">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
<div class="sk-child sk-bounce4"></div>
<div class="sk-child sk-bounce5"></div>
</div>
</section>
<header>
<nav class="navbar navbar-expand-md navbar-custom fixed-top">
<div class="container-fluid py-3">
<a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div id="nav-icons">
<span></span><span></span><span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">I'm Interested</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pb-4">
<section class="topsec"> <h1>lorem, <br> lorem</h1>
</section>
</div>
<section class="restaurants-section px-5">
<div class="container-fluid">
<div class="row justify-content-between restaurants">
<div class="col-md-6 col-lg-6 restaurants-text">
<h3>lorem</h3>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="read-more" href="#">learn more</a>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>

The easiest fix would be to add some css to hide the navbar until the .pageloaded class is added to the body.
.navbar {
visibility: hidden;
}
.pageloaded .navbar {
visibility: visible;
}

Before answering to the question "why the header is showing", let's see why the rest of the body is not showing for the first 300ms.
It is because there is a element .spinner. Its width and height take up 100% of the page. Its position is set to fixed means the element is fixed at top 0 and left 0 (the upper-left corner) according to the CSS. More importantly is fixed position element break the normal document flow. Normally element are rendered top-to-bottom, left-to-right. .spinner being removed from document flow means the spinner was taken out and stick to the top left. Therefore the .spinner with 100% size take up the whole screen and showing the spinning bubble. There is another effect, the place originally occupied for .spinner will be remove and the main body it will be brought up. That means .spinner and the main body is not displayed one after one, but they are stacked together. .spinner being on top and cover the rest is because it has a z-index applied to it, which the value is 999.
Now back to the question, why header is showing. Because of bootstrap, .fixed-top has z-index: 1030, which greater than .spinner's 999. That's why it is on top of the spinner.
The solution you need is, to set the .spinner z-index any value greater than bootstrap's default.
.section-spinner {
/* ... */
z-index: 1050;
}
Example below.
$(window).on("load", function() {
$('.spinner').fadeOut(300);
$("body").addClass("pageloaded");
});
:root {
--primary-color:#0071ce;
--secondary-color:#ffffff;
}
body{
min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
font-family: 'ProximaNova-Semibold', Courier, monospace;
text-transform: uppercase;
color: var(--primary-color);
display: block;
font-size: 1.2rem;
}
.navbar-custom{
padding: 25px;
padding-left: 25px;
}
.navbar-custom a:hover{
text-decoration: underline;
color: var(--primary-color);
}
#nav-icons {
width: 35px;
height: 45px;
position: relative;
margin: 6px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
cursor: pointer;
}
#nav-icons span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: blue;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
top: 0px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(2) {
top: 11px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(3) {
top: 21px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
left: 2px;
}
#nav-icons.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icons.open span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 10px;
left: 4px;
}
#media (max-width: 767.98px) {
.navbar-custom{
padding: 0px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-collapse{
display: block;
position: absolute;
width: 150vw;
height: 150vh;
left: 0;
top: 0;
background: rgba(255, 232, 73, 0.95);
z-index: 2;
}
#nav-icons{
z-index: 3;
}
.navbar-collapse .navbar-nav{
padding-top: 120px;
padding-left: 30px;
}
.navbar-collapse .navbar-nav {
-webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
.navbar-collapse .navbar-nav li:nth-child(1) {
animation-delay: 0.1s;
}
.navbar-collapse .navbar-nav li:nth-child(2) {
animation-delay: 0.2s;
}
.navbar-collapse .navbar-nav li:nth-child(3) {
animation-delay: 0.3s;
}
}
/* top section */
.topsec{
position: relative;
padding-top: 165px;
}
.topsec h1{
font-family: ProximaNova-Extrabld;
font-size: 3rem;
text-transform: uppercase;
color: var(--primary-color);
line-height: 1;
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
/* restaurants */
.restaurants-section{
background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
background-size: cover;
background-position: top center;
padding: 10rem 0;
display: block;
width: 100%;
}
.restaurants-text{
padding-top: 100px;
}
.restaurants h3{
font-size: 40px;
font-family: "ProximaNova-Semibold",sans-serif;
color: #fff;
}
.restaurants p{
font-size: 1rem;
margin: 0rem 0 1rem;
line-height: 150%;
color: white;
}
.restaurants a{
display: inline-block;
padding: 5px 25px;
background: #0071ce;
color: #ffe800;
font-size: 20px;
font-family: "ProximaNova-Bold",sans-serif;
transition: all 0.3s;
text-decoration: none;
}
.restaurants a:hover{
background: #ffe800;
color: #0071ce;
transition: all 0.3s;
text-decoration: underline;
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sk-three-bounce {
margin: 40px auto;
width: 10rem;
text-align: center;
margin-top: 48vh;
}
.sk-three-bounce .sk-child {
width: 1.5rem;
height: 1.5rem;
background-color: #0071ce;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce4 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
background-color: #0071ce;
}
.section-spinner {
position: fixed;
height: 100%;
width: 100%;
background: #FFFFFF;
top: 0;
left: 0;
z-index: 1050;
}
.section-spinner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
<title>|Welcome to my website </title>
<link rel="stylesheet" href="./css/style.css">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="section-spinner spinner">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
<div class="sk-child sk-bounce4"></div>
<div class="sk-child sk-bounce5"></div>
</div>
</section>
<header>
<nav class="navbar navbar-expand-md navbar-custom fixed-top">
<div class="container-fluid py-3">
<a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div id="nav-icons">
<span></span><span></span><span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">I'm Interested</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pb-4">
<section class="topsec"> <h1>lorem, <br> lorem</h1>
</section>
</div>
<section class="restaurants-section px-5">
<div class="container-fluid">
<div class="row justify-content-between restaurants">
<div class="col-md-6 col-lg-6 restaurants-text">
<h3>lorem</h3>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="read-more" href="#">learn more</a>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>

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%);
}

Executing and formatting jQuery hamburger menu

I am having trouble figuring out how to make the hamburger menu I just spent a day on actually do something other than look cute. I have been trying to put together a couple different blocks of code I've gathered to create what I am envisioning but as I'm a bit of a newb to jQuery it's not working. I assume I'm likely missing something simple, but maybe not. Anyway... your help is greatly appreciated! (comments describing what I'm trying to do in the code.
Also- I added what's in my external jQuery and css file here inline but my actual file has links to both instead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="hamburgers.css">
<script type="text/javascript" src="ham.js"></script>
<style>
/* The following CSS is for the red hamburger animation in the lower left corner */
#nav-icon4 {
width: 60px;
height: 45px;
position: fixed;
bottom: 25px;
right: 25px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: darkred;
border-radius: 9px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
/* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #dddddd;
}
.hamburger {
background: none;
position: absolute;
top: 0;
right: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: #999;
border: 0;
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
right: 0;
padding: 7px 15px 0px 15px;
color: #999;
border: 0;
font-size: 3em;
line-height: 65px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #f1f1f1;
position: absolute;
text-align: center;
font-size: 12px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #ffffff;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #666;
}
.menu a:hover {
text-decoration: none;
color: #666;
}
.glyphicon-home {
color: white;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
header {
display: inline-block;
font-size: 12px;
padding-left: 20px;
}
</style>
<title>hamburgers</title>
</head>
<body>
<!-- This is how I want my hamburger icon/animation to look (the red one on the bottom right). However I need to put the text "menu" next to the icon when in desktop, but responsive and disappearing in mobile -->
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
<!--I want the rest of the nav bar to resemble this (but with the red hamburger on the top right) and the drop down menu appearing when said icon is clicked-->
<!-- The menu isn't working at all now. I assume there's some conflict with the jQuery codes for each menu but I may be totally off on that assumption. -->
<header>
<span>Shine Design</span>
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
<!-- Script (normally linked in external) for red hamburger -->
<script>
$(document).ready(function(){ $('#nav-icon4').click(function(){ $(this).toggleClass('open'); }); });
<!-- The following is the code for the grey hamburger icon-->
$( ".cross" ).hide(); $( ".menu" ).hide(); $( ".hamburger" ).click(function() { $( ".menu" ).slideToggle( "slow", function() { $( ".hamburger" ).hide(); $( ".cross" ).show(); }); }); $( ".cross" ).click(function() { $( ".menu" ).slideToggle( "slow", function()
{ $( ".cross" ).hide(); $( ".hamburger" ).show(); }); });
</script>
</body>
</html>

Remove the fixed position from your animated hamburger, add it to the header and float it to the right, hide the menu first and then toggle it
$(document).ready(function() {
$('.menu-title,#nav-icon4').click(function() {
$('#nav-icon4').toggleClass('open');
$(".menu").slideToggle("slow");
});
});
/* The following CSS is for the red hamburger animation in the lower left corner */
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: 15px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #999;
border-radius: 5px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
/* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #dddddd;
}
.menu {
z-index: 1000000;
display: none;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #f1f1f1;
position: absolute;
text-align: center;
font-size: 12px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #ffffff;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #666;
}
.menu a:hover {
text-decoration: none;
color: #666;
}
.glyphicon-home {
color: white;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
header {
display: inline-block;
font-size: 12px;
padding-left: 20px;
}
.menu-title {
float:right;
margin-top:20px;
margin-right:10px;
line-height:1;
color:#999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="hamburgers.css">
<script type="text/javascript" src="ham.js"></script>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
<h2 class="menu-title">MENU</h2>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
</html>

Try this:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
Ref: https://jsfiddle.net/f19kz640/

So i deleted the jQuery for the grey icon it is not working anyway.
Also you dont need to wrap the jQuery for the red hamburger menu with document ready.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="hamburgers.css">
<script type="text/javascript" src="ham.js"></script>
<style>
/* The following CSS is for the red hamburger animation in the lower left corner */
#nav-icon4 {
width: 60px;
height: 45px;
position: fixed;
bottom: 25px;
right: 25px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: darkred;
border-radius: 9px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
/* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #dddddd;
}
.hamburger {
background: none;
position: absolute;
top: 0;
right: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: #999;
border: 0;
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
right: 0;
padding: 7px 15px 0px 15px;
color: #999;
border: 0;
font-size: 3em;
line-height: 65px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #f1f1f1;
position: absolute;
text-align: center;
font-size: 12px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #ffffff;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #666;
}
.menu a:hover {
text-decoration: none;
color: #666;
}
.glyphicon-home {
color: white;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
header {
display: inline-block;
font-size: 12px;
padding-left: 20px;
}
</style>
<title>hamburgers</title>
</head>
<body>
<!-- This is how I want my hamburger icon/animation to look (the red one on the bottom right). However I need to put the text "menu" next to the icon when in desktop, but responsive and disappearing in mobile -->
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
<!--I want the rest of the nav bar to resemble this (but with the red hamburger on the top right) and the drop down menu appearing when said icon is clicked-->
<!-- The menu isn't working at all now. I assume there's some conflict with the jQuery codes for each menu but I may be totally off on that assumption. -->
<header>
<span>Shine Design</span>
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
<!-- Script (normally linked in external) for red hamburger -->
<script>
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
</script>
</body>
</html>

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>

Accordion/Drawer menu with Javascript? please advise

Sorry to bother, I want to create a menu like this one: sample menu could you please guide me? point me in the right direction? what would be the correct name of this kind of menu? what kind of language could I use? any similar examples out there? thanks a lot for your time.
Biz

Check this out,
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Cherry pick the one which suits your need.

try this menu(basic)
markup:
<div class="mainMenu" >
<div class="main-meu-nav" >
<ul>
<li data-id="cat1" >menu 1</li>
<li data-id="cat2">menu 2</li>
<li data-id="cat3">menu 3</li>
<li data-id="cat4">menu 4</li>
</ul>
</div>
<div class="mainmenu-category" >
<div class="category-row" id="cat1" >menu 1 list item</div>
<div class="category-row" id="cat2" >menu 2 list item</div>
<div class="category-row" id="cat3" >menu 3 list item</div>
<div class="category-row" id="cat4" >menu 4 list item</div>
</div>
</div>
Style:
.mainMenu
{
width:1024px;
height:auto;
margin:auto;
}
.main-meu-nav
{
width:100%;
height:auto;
float:left;
}
.main-meu-nav ul
{
width:100%;
height:auto;
float:left;
list-style:none;
}
.main-meu-nav ul li
{
width:auto;
display:block;
height:auto;
float:left;
list-style:none;
margin:0px 10px;
padding:10px ;
border:1px solid red
}
.mainmenu-category
{
width:100%;
height:auto;
float:left;
display:none
}
.category-row
{
width:90%;
height:auto;
float:left;
padding:5%;
background:#cccccc;
}
Script:
$(document).ready(function() {
$(".main-meu-nav > ul >li").on("click" , function() {
$(".mainmenu-category").fadeIn();
var catId = $(this).attr("data-id");
$(".mainmenu-category").find(".category-row").slideUp(100);
$(".mainmenu-category").find("#"+catId).slideDown(1000)
});
});

Try
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>

<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
nav {
background-color:#414956;
height: 100%;
position: fixed;
right: -220px;
top: 0;
-moz-transition: right 0.2s linear;
-o-transition: right 0.2s linear;
-webkit-transition: right 0.2s linear;
transition: right 0.2s linear;
width: 220px;
z-index: 9001;/* IT'S OVER 9000! */
padding-top: 4em;
}
#menuToggle {
background: #e3117c;
display: block;
position: fixed;
height: 40px;
right: 15%;
top: 33px;
width: 46px;
z-index:9999;
border-radius: 5px;
}
#menuToggle span {
background: white;
display: block;
height:6%;
left: 20%;
position: absolute;
top: 45%;
width: 60%;
}
#menuToggle span:before,
#menuToggle span:after {
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
top: -250%;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 100%;
}
#menuToggle span:after { top: 250%; }
nav a {
color: #fff;
display: block;
font-size: 20px;
margin: 0 0 0 30px;
font-weight: 300;
letter-spacing: 1px;
}
nav a:after {
background: #e3117c;
content: '';
display: block;
height: 2px;
-moz-transition: width 0.5s;
-o-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
width: 0;
margin-top: 0.2em;
}
n
.menu nav a:hover,.menu nav a:focus {
color: #e3117c;
}
.open nav {
right: 0;
}
.open #menuToggle span {
background: transparent;
left: 20%;
top: 45%;
}
.open #menuToggle span:before,
.open #menuToggle span:after {
background: white;
top: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #menuToggle span:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menuToggle .navClosed {
-moz-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
-webkit-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#menuToggle .navClosed:before,
#menuToggle .navClosed:after {
-moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;
-o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
-webkit-transition-delay: 0.1s, 0.1s;
transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;
}
#menuToggle .navOpen {
-moz-transition: background 0.1s linear 0.2s;
-o-transition: background 0.1s linear 0.2s;
-webkit-transition: background 0.1s linear;
-webkit-transition-delay: 0.2s;
transition: background 0.1s linear 0.2s;
}
#menuToggle .navOpen:before,
#menuToggle .navOpen:after {
-moz-transition: top 0.2s linear, -moz-transform 0.2s linear;
-o-transition: top 0.2s linear, -o-transform 0.2s linear;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
transition: top 0.2s linear, transform 0.2s linear;
}
/*-- //menu-navigation --*/
</style>
<script>
$('#show-hide-menu').click(function() {
if ($('#sidebar').hasClass('visible')) {
$('#sidebar').removeClass('visible');
} else {
$('#sidebar').addClass('visible');
}
});
</script>
</head>
<body>
</head>
<body>
<div class="menu">
<span class="navClosed"></span>
<nav>
Home
About
Services
Gallery
News
price
Contact
</nav>
</div>
<script>
(function($){
// Menu Functions
$(document).ready(function(){
$('#menuToggle').click(function(e){
var $parent = $(this).parent('.menu');
$parent.toggleClass("open");
var navState = $parent.hasClass('open') ? "hide" : "show";
$(this).attr("title", navState + " navigation");
// Set the timeout to the animation length in the CSS.
setTimeout(function(){
console.log("timeout set");
$('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
}, 200);
e.preventDefault();
});
});
})(jQuery);
</script>
<!--// navbar-->
</body>
</html>
</body>
</html>

**<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{padding:0; margin:0; font-family: 'Roboto', sans-serif;}
h1{margin:0; color:#ddd; padding:10px; border-bottom:1px solid #666;}
button:focus{outline:none}
aside{background:#1a1d23; width:250px;height:100vh; position:fixed; transition:.3s;left:-250px;top:0;transition-timing-function: cubic-bezier(0.9,0,1,1);}
aside.close{left:0;transition:.3s;transition-timing-function: cubic-bezier(0.9,0,1,1);}
nav a{display: block; color:#ddd; text-decoration:none;padding:10px;}
nav a:hover{background:#313640;}
aside button{border:none; background:none; position: absolute;right:-40px; top:7px; font-size:30px; transform:rotate(90deg); display:inline-block; cursor:pointer}/style>
<body>
<header></header>
<div class="container">
<aside>
<button class="toggle">|||</button>
<h1>Menu</h1>
<nav>
<ul>
<li>
Home
<div class="collapse" id="menu1">
Subitem 1
<div class="collapse" id="menu1sub1">
Subitem 1 a
Subitem 2 b
Subitem 3 c
<div class="collapse" id="menu1sub1sub1">
Subitem 3 c.1
Subitem 3 c.2
</div>
Subitem 4 d
Subitem 5 e
<div class="collapse" id="menu1sub1sub2">
Subitem 5 e.1
Subitem 5 e.2
</div>
</div>
Subitem 2
Subitem 3
</div>
</li>
</li>
About Us
Services
Portfolio
<a `href`="#">Contact Us</a>
</nav>
</aside>
</div>
</ul>
<script>
$(document).ready(function(){
$(".toggle").click(function(){
$("aside").toggleClass("close")
});
});
// click outside
$(document).mouseup(function(e){
var container = $("aside");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$("aside").remove Class("close")
}
});
</script>**