Can't call function outside of this Div

Can't call function outside of this Div - javascript

I tried so many ways to get this code to work and failed every time. I know that it is easy but I can't get behind it...
If I click the 3 Stripes, they will transform to an X - that works perfect... but if I want to click the Menu text - the 3 stripes won't transform.
here is the working Code HTML, CSS and JS
function openCloseMenu(x) {
x.classList.toggle("change");
$('.navigation-menu').toggleClass('hidden');
}
.menu-container {
display: inline-block;
cursor: pointer;
white-space: nowrap;
float: right;
}
.menu-block {
display: inline;
white-space: nowrap;
width: auto;
}
.menu-block p {
font: 1.55em "Amatic Regular";
font-weight: bold;
float: right;
margin: 0;
color: #53b1c2;
padding-right: 0.3em;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
background-color: #2ba4b8;
opacity: 0.8;
margin: 6px 0;
transition: 0.4s;
border-radius: 50px;
}
.bar1 {
width: 1em;
height: 5px;
}
.bar2 {
width: 1.5em;
height: 5px;
}
.bar3 {
width: 2em;
height: 5px;
}
/* Rotate first bar */
.change .bar1 {
width: 2em;
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<span class="menu-block">
<div class="menu-container" onclick="openCloseMenu(this);">
<div class="bar1"></div>
<div class="bar2"></div>``
<div class="bar3"></div>
</div>
<p class="hidden-xs" onclick="openCloseMenu(this);">MENÜ</p>
</span>

This is Beacause , in your function you send this as a param (this), and in the menu this refer to the menu itself so , it wont work ,
Remove param as shown in bellow snippet :
function openCloseMenu() {
$(".menu-container").toggleClass("change");
$('.navigation-menu').toggleClass('hidden');
}
.menu-container {
display: inline-block;
cursor: pointer;
white-space: nowrap;
float: right;
}
.menu-block {
display: inline;
white-space: nowrap;
width: auto;
}
.menu-block p {
font: 1.55em "Amatic Regular";
font-weight: bold;
float: right;
margin: 0;
color: #53b1c2;
padding-right: 0.3em;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
background-color: #2ba4b8;
opacity: 0.8;
margin: 6px 0;
transition: 0.4s;
border-radius: 50px;
}
.bar1 {
width: 1em;
height: 5px;
}
.bar2 {
width: 1.5em;
height: 5px;
}
.bar3 {
width: 2em;
height: 5px;
}
/* Rotate first bar */
.change .bar1 {
width: 2em;
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="menu-block">
<div class="menu-container" onclick="openCloseMenu();">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<p class="hidden-xs" onclick="openCloseMenu();">MENÜ</p>
</span>

You may understand your own code:
function openCloseMenu(element) {
a function wich takes a parameter element ( x is not really a good name)
element.classList.toggle("change");
and then toggles a change on this certain element. So:
<p class="hidden-xs" onclick="openCloseMenu(this);">MENÜ</p>
This will trigger a change on the menu name. Which we dont want.
We want to change this element:
<div id="menu-icon" class="menu-container" onclick="openCloseMenu();">
Ive assigned an id to it. So we can get it like this:
$("#menu-icon")
The full code:
function openCloseMenu() {//no param needed here
$("#menu-icon").toggleClass("change");
$('.navigation-menu').toggleClass('hidden');
}
This answer uses http://jQuery.org. No Jquery:
function openCloseMenu() {//no param needed here
document.getElementById("menu-icon").classList.toggle("change");
document.getElementsByClassName('navigation-menu')[0].classList.toggle('hidden');
}

Related

How to toggle a single element and make other elements react [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have this:
function myFunction(x) {
x.classList.toggle('change');
}
body,
hmtl {
background- color: black;
}
.text {
color: Black;
}
a {
text-decoration: none;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 39px;
height: 30px;
border-radius: 90px;
background-color: blue;
margin: 20px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-345deg) translate(-9px, 6px);
height: 100px;
position: relative;
top: -100px;
width: 200px;
background- color: blue;
border-radius: 100px;
}
.change .bar2 {
transform: rotate(3000deg);
width: 100px;
height: 200px;
position: relative;
left: 200px;
background-color: blue;
top: -100px;
border- radius: 100px;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: blue;
width: 200px;
height: 200px;
position: relative;
left: 100px;
bottom: 200px;
opacity: 1! important;
border-radius: 100px;
}
.change .text {
color: black;
font-size: 10px;
position: relative;
top: -200px;
background-color: green;
display: block;
}
<a id="mobile-nav" href="#">
<div class="container" onclick="myFunction(this)">
<div class="bar1">
<p class="details"></p>
</div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="text">Hello</div>
</div>
</a>
I want to be able to toggle just the first element .bar1 and have the other two react in the way specified. I don't want user to be able to toggle bottom two elements .bar2 .bar3 but I still want them to react when .bar1 is pressed.
I tried moving the a attribute, but that didn't work as I was able to toggle the .bar1 but .bar2 and .bar3 didn't react. They are in a container so do I need separate containers and if so how do I link them? At the moment you can only toggle all three at once.

You can attach the event listener to the container, but only match if the event.target is the element you want.
There are of course other ways to achieve this by storing variables and attaching event listeners differently, and entirely depends on what you are trying to achieve.
Using onclick as you have in your example:
function myFunction(this1, x) {
if(x.target.matches('.bar1'))
this1.classList.toggle('change');
}
body,
hmtl {
background- color: black;
}
.text {
color: Black;
}
a {
text-decoration: none;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 39px;
height: 30px;
border-radius: 90px;
background-color: blue;
margin: 20px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-345deg) translate(-9px, 6px);
height: 100px;
position: relative;
top: -100px;
width: 200px;
background- color: blue;
border-radius: 100px;
}
.change .bar2 {
transform: rotate(3000deg);
width: 100px;
height: 200px;
position: relative;
left: 200px;
background-color: blue;
top: -100px;
border- radius: 100px;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: blue;
width: 200px;
height: 200px;
position: relative;
left: 100px;
bottom: 200px;
opacity: 1! important;
border-radius: 100px;
}
.change .text {
color: black;
font-size: 10px;
position: relative;
top: -200px;
background-color: green;
display: block;
}
<a id="mobile-nav" href="#">
<div class="container" onclick="myFunction(this,event)">
<div class="bar1">
<p class="details"></p>
</div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="text">Hello</div>
</div>
</a>
Using addEventListener
function myFunction(x) {
if(x.target.matches('.bar1'))
this.classList.toggle('change');
}
document.querySelector('.container').addEventListener('click',myFunction);
body,
hmtl {
background- color: black;
}
.text {
color: Black;
}
a {
text-decoration: none;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 39px;
height: 30px;
border-radius: 90px;
background-color: blue;
margin: 20px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-345deg) translate(-9px, 6px);
height: 100px;
position: relative;
top: -100px;
width: 200px;
background- color: blue;
border-radius: 100px;
}
.change .bar2 {
transform: rotate(3000deg);
width: 100px;
height: 200px;
position: relative;
left: 200px;
background-color: blue;
top: -100px;
border- radius: 100px;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: blue;
width: 200px;
height: 200px;
position: relative;
left: 100px;
bottom: 200px;
opacity: 1! important;
border-radius: 100px;
}
.change .text {
color: black;
font-size: 10px;
position: relative;
top: -200px;
background-color: green;
display: block;
}
<a id="mobile-nav" href="#">
<div class="container">
<div class="bar1">
<p class="details"></p>
</div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="text">Hello</div>
</div>
</a>

Open hamburger menu

can anyone help me making my "hamburger menu" do something? I want that, when a person clicks on it, words like "Home and Works" appear on the side. And then when you close it, and goes to its previous form, the menu disappears as well.
HTML
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar6"></div>
<div class="bar5"></div>
</div>
CSS
<style>
.container {
display: inline-block;
cursor: pointer;
position: absolute;
top: 50px;
right: 50px;
z-index: 99
}
.bar1{
width: 48px;
height: 5px;
background-color: rgb(156, 156, 156);
margin: 6px 0;
transition: 0.4s;
}
.bar2{
width: 48px;
height: 5px;
background-color: rgb(63, 63, 63);
margin: 6px 0;
transition: 0.4s;
}
.bar3{
width: 48px;
height: 5px;
background-color: rgb(134, 134, 134);
margin: 6px 0;
transition: 0.4s;
}
.bar4{
width: 48px;
height: 5px;
background-color: rgb(77, 77, 77);
margin: 6px 0;
transition: 0.4s;
}
.bar5{
width: 20px;
height: 7px;
background-color: rgb(255, 255, 255);
margin: 6px 0;
transition: 0.7s;
z-index: 99
}
.bar6 {
width: 37.5px;
height: 7px;
background-color: rgb(255, 255, 255);
margin: 6px 0;
transition: 0.7s;
z-index: 99
}
.bar7 {
width: 37.5px;
height: 5px;
background-color: rgb(255, 255, 255);
margin: 6px 0;
transition: 0.7s;
z-index: 99
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-75deg) translate(-22px, 18px) ;
}
/* Rotate second bar */
.change .bar2 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(75deg) translate(15px, 1.5px) ;
}
/* Rotate third bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(-75deg) translate(-3.5px,3px) ;
}
/* Rotate forth bar */
.change .bar4 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(75deg) translate(-2.9px, -14px) ;
}
/* Rotate fifth bar */
.change .bar6 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(90deg) translate(0px, -12.7px) ;
}
/* Rotate sixth bar */
.change .bar5 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-90deg) translate(54px, 21.5px) ;
}
</style>
JavaScript
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
What do I need to put more? Those bars function as my logo, so I didn't want to get them off, but at the same time, as a newbie, I don't know how to incorporate a menu in it.
Thank you!

How to hide/show the menu using classList toogle

I am creating an interactive hamburger button that shows and hides the menu. what I am trying to achieve here is when I click the hamburger button, the menu shows up and when I click transformed "X" button, the menu hides itself vice versa. I would appreciate tips. Thank you so much.
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

You have done everything except connect those two. You just need to add the following CSS:
.menu {
display: none;
}
.change + .menu {
display: block;
}
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
display: none;
}
.change + .menu {
display: block;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>
Bonus
If you want a nice fading animation, you can also use opacity.
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
opacity: 0;
transition: opacity 0.5s linear;
}
.change + .menu {
opacity: 1;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

Please try this code
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
transform: rotate(-45deg) translate(-9px, 7px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -7px);
transform: rotate(45deg) translate(-8px, -7px);
}
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
max-height: 0;
padding: 0;
}
.change + .menu {
max-height: 500px;
}
.change + .menu,
.change ,
.menu {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

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>

My Nav icon does not close

Hi there I am trying to create a side nav, and I cannot manage to close the menu with a second function of "onclick()"
the navigation opens perfectly but then it does not close.
Here is my fiddle, I was just hoping to get help on having a added onlick function that closes the nav when clicking on the nav icon again.
function myFunction(x) {
x.classList.toggle("change");
document.getElementById("mySidenav").style.width = "220px";
document.getElementById("Content").style.paddingLeft = "0px";
document.body.style.opacity = "0.1";
}
/* The side navigation menu */
.sidenav {
height: 100%;
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
z-index: 400;
right: 0;
background-color: #0F0F0F;
overflow-x: hidden;
padding-top: 90px;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
opacity: 0.8;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 18px;
text-align: right;
vertical-align: middle;
justify-content: center;
display: flex;
line-height: 20px;
color: #FFFFFF;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: #00CB10;
text-decoration: underline;
}
.menu-icon {
display: inline-block;
position: fixed;
z-index: 500;
cursor: pointer;
margin-right: 15px;
margin-top: 15px;
margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
width: 30px;
height: 4px;
background-color: #0F0F0F;
border-radius: 10px;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 5px);
transform: rotate(-45deg) translate(-9px, 5px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -6px);
transform: rotate(45deg) translate(-8px, -6px);
}
<div id="Menu" class="menu-icon" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="mySidenav" class="sidenav">
<!--Start Side Nav-->
Our Story
Products
Contact Us
Login/Sign up
</div>
<!---->

You don't need to set the width in JS. You are toggling an additionnal class when the menu is open, you can play with this.
Another point is that you shouldn't change the body opacity (it will affect the menu too), but only the main content div.
Or display an overlay div with a fixed position (100% width and height, background and opacity) so it creates an effect of disabled content.
In my exemple I commented the unnecessary js lines, and I added somme CSS :
function myFunction(x) {
x.classList.toggle("change");
//document.getElementById("mySidenav").style.width = "220px";
//document.getElementById("Content").style.paddingLeft = "0px";
document.body.style.opacity = "0.1";
}
/* The side navigation menu */
.sidenav {
height: 100%;
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
z-index: 400;
right: 0;
background-color: #0F0F0F;
overflow-x: hidden;
padding-top: 90px;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
opacity: 0.8;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 18px;
text-align: right;
vertical-align: middle;
justify-content: center;
display: flex;
line-height: 20px;
color: #FFFFFF;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: #00CB10;
text-decoration: underline;
}
.menu-icon {
display: inline-block;
position: fixed;
z-index: 500;
cursor: pointer;
margin-right: 15px;
margin-top: 15px;
margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
width: 30px;
height: 4px;
background-color: #0F0F0F;
border-radius: 10px;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 5px);
transform: rotate(-45deg) translate(-9px, 5px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -6px);
transform: rotate(45deg) translate(-8px, -6px);
}
.change + .sidenav {
width: 220px;
}
<div id="Menu" class="menu-icon" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="mySidenav" class="sidenav">
<!--Start Side Nav-->
Our Story
Products
Contact Us
Login/Sign up
</div>
<!---->

I have added new class called toggleClass and I have provided width:220px, and I have commented document.getElementById("mySidenav").style.width = "220px"
working fiddle

If you are trying to set the width in javascript,then you can go for a check whether the menu is open or not.
However the above answer is more appropriate in this case.
function myFunction(x) {
x.classList.toggle("change");
var width=document.getElementById("mySidenav").style.width;
if(width!="220px" || width=="")
{
document.getElementById("mySidenav").style.width="220px";
}
else
{
document.getElementById("mySidenav").style.width="0px";
}
document.getElementById("Content").style.paddingLeft = "0px";
document.body.style.opacity = "0.1";
}
/* The side navigation menu */
.sidenav {
height: 100%;
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
z-index: 400;
right: 0;
background-color: #0F0F0F;
overflow-x: hidden;
padding-top: 90px;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
opacity: 0.8;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 18px;
text-align: right;
vertical-align: middle;
justify-content: center;
display: flex;
line-height: 20px;
color: #FFFFFF;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: #00CB10;
text-decoration: underline;
}
.menu-icon {
display: inline-block;
position: fixed;
z-index: 500;
cursor: pointer;
margin-right: 15px;
margin-top: 15px;
margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
width: 30px;
height: 4px;
background-color: #0F0F0F;
border-radius: 10px;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 5px);
transform: rotate(-45deg) translate(-9px, 5px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -6px);
transform: rotate(45deg) translate(-8px, -6px);
}
<div id="Menu" class="menu-icon" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="mySidenav" class="sidenav">
<!--Start Side Nav-->
Our Story
Products
Contact Us
Login/Sign up
</div>
<!---->

The key thing missing from your set up is that #mySidenav needs to be able to toggle between states as well as .menu-icon.
Consequently, you need to set up myFunction() so that it toggles the class .change on both .menu-icon and #mySidenav.
function myFunction() {
var x = document.getElementsByClassName('menu-icon')[0];
var mySidenav = document.getElementById('mySidenav');
x.classList.toggle('change');
mySidenav.classList.toggle('change');
}
var menuIcon = document.getElementsByClassName('menu-icon')[0];
menuIcon.addEventListener('click',myFunction,false);
/* The side navigation menu */
.sidenav {
height: 100%;
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
z-index: 400;
right: 0;
background-color: #0F0F0F;
overflow-x: hidden;
padding-top: 90px;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
opacity: 0.8;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 18px;
text-align: right;
vertical-align: middle;
justify-content: center;
display: flex;
line-height: 20px;
color: #FFFFFF;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: #00CB10;
text-decoration: underline;
}
.menu-icon {
display: inline-block;
position: fixed;
z-index: 500;
cursor: pointer;
margin-right: 15px;
margin-top: 15px;
margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
width: 30px;
height: 4px;
background-color: #0F0F0F;
border-radius: 10px;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 5px);
transform: rotate(-45deg) translate(-9px, 5px);
background-color: rgb(255,255,255);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -6px);
transform: rotate(45deg) translate(-8px, -6px);
background-color: rgb(255,255,255);
}
#mySidenav.change {
width: 220px;
}
#Content.change {
padding-left: 0;
}
body.change {
opacity: 0.1;
}
<div id="Menu" class="menu-icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="mySidenav" class="sidenav">
<!--Start Side Nav-->
Our Story
Products
Contact Us
Login/Sign up
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Can't call function outside of this Div - javascript

Related

How to toggle a single element and make other elements react [closed]

Open hamburger menu

How to hide/show the menu using classList toogle

Executing and formatting jQuery hamburger menu

My Nav icon does not close

Categories

Resources