We Keep Coding

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!

Toggle a reverse animation when a button is clicked the second time

I am looking to animate a menu.The menu button is a div which has an animation as well with a click event. I succesfully got the menu to beatifully appear on the screen, but i can't get it to leave it as well, preferably with the same, but reversed, animation. This is my html:
<div class="dropdown-meniu">
<div class="buton-meniu" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-meniu-content">
<p>TEST</p>
</div>
</div>
I have used for the moment the solution that W3 Schools provides for the dropdown, as well for the animation of the button. This is the styling of the menu and the animation:
.dropdown-meniu-content {
display: none;
position: fixed;
background-color: #696969;
width: 35%;
max-width: 500px;
height: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: hidden;
right: 0;
animation-name: slideIn-meniu;
-webkit-animation-duration: 0.6s;
-webkit-animation-name: slideIn-meniu;
animation-duration: 0.6s;
}
#keyframes slideIn-meniu {
from { transform: translateX(100%); opacity: 0.5; }
to { margin-right: 0px; opacity: 1; }
}
.show {
display:block;
}
If it is necessary, I will post the other CSS. For the script, I have used jQuery and javascript for the two animations(I am a noob at JavaScript/jQuery so I couldn't get it to work with only JavaScript/jQuery alone and I know that jquery is slow to load but I am using it for other things).
Thank you in advance!
EDIT:
This is the jsFiddle: https://jsfiddle.net/Lfv7qL7z/3/.

Your issue is that you are trying to animate between display: none and display: block which doesn't work. You need to hide the element in some other manner, like a negative offset, and then animate it to be visible.
Modify your .dropdown-meniu-content rule to start offscreen and to have a transition property. Then have .show reset the transform back to translateX(0%):
function myFunction(x) {
x.classList.toggle("change");
document.getElementById("myDropdown").classList.toggle("show");
}
html,
body {
margin: 0px;
padding: 0px;
max-width: 100%;
}
.wrapper {
height: 110px;
width: 100%;
max-width: 10000px;
background-color: rgb(206, 206, 206, 0.2);
}
.logo {
float: left;
margin-top: 10px;
margin-left: 5px;
width: 200px;
height: 100px;
}
.meniu {
float: right;
width: auto;
}
.buton-meniu {
display: block;
cursor: pointer;
width: 35px;
margin-right: 30px;
margin-top: 40px;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.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);
}
.dropdown-meniu {
position: relative;
display: inline-block;
}
.dropdown-meniu-content {
top: 110px;
position: fixed;
background-color: #696969;
width: 30%;
max-width: 10000px;
height: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
overflow: hidden;
right: 0;
transform: translateX(100%);
transition: transform 1s ease;
animation-name: slideIn-meniu;
-webkit-animation-duration: 0.6s;
-webkit-animation-name: slideIn-meniu;
animation-duration: 0.75s;
}
#keyframes slideIn-meniu {
from {
transform: translateX(100%);
opacity: 0.5;
}
to {
margin-right: 0px;
opacity: 1;
}
}
.show {
transform: translateX(0%);
}
<div class="meniu">
<div class="dropdown-meniu">
<div class="buton-meniu" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-meniu-content">
<p>TEST </p>
</div>
</div>
</div>

Not exactly sure what you need, but maybe something like this? I pulled out the display: none and stripped down the animations a bit.
HTML
<div class="dropdown-meniu">
<div class="buton-meniu" onclick="myFunction(this)">
<div class="bar1">Click Me</div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-meniu-content hide">
<p>TEST</p>
</div>
</div>
CSS
.dropdown-meniu-content {
/* display: none; */
position: fixed;
background-color: #696969;
width: 35%;
max-width: 500px;
height: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: hidden;
right: 0;
}
#keyframes slideIn-meniu {
from { opacity: 0.5; }
to { opacity: 1; }
}
#keyframes slideOut-meniu {
from { opacity: 1; }
to { opacity: 0.5; }
}
.show {
display:block;
right: 0;
transition: right 0.6s;
-webkit-animation-duration: 0.6s;
-webkit-animation-name: slideIn-meniu;
animation-duration: 0.6s ease;
}
.hide {
right: -35%;
transition: right 0.6s ease;
display: block;
-webkit-animation-duration: 0.6s;
-webkit-animation-name: slideOut-meniu;
animation-duration: 0.6s ease;
}
jQuery
$('.bar1').click(function(){
$('.dropdown-meniu-content').toggleClass('show').toggleClass('hide');
})
https://jsfiddle.net/282vpcm2/15/

Can't call function outside of this Div

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

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>