Develop Reference

Change color of hamburger menu on click

I want to change the color of the hamburger menu when the menu is opened. When the user clicks on the hamburger menu, the color should change from black to white and and vice versa. I´m not using a button for the menu but three spans. I haven't tried anything yet, because I´m pretty new and espacially js is still very difficult for me. Thanks for helping me!
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
});
document.querySelector(".nav.link").forEach((n) =>
n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
})
);
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 1000px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 0px;
gap: 0;
flex-direction: column;
background-color: black;
width: 100%;
text-align: center;
}
.nav-item {
margin: 16px 0;
display: flex;
flex-direction: column;
}
.nav-menu.active {
left: 0;
}
.menu a {
color: white;
}
}
<nav id="nav" class="navbar">
<ul class="nav-menu">
<li id="current" class="nav-item">
<a
href="file:///C:/Users/.../index.html"
class="nav-link"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
class="nav-link"
>About</a
>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>

To change the color of the bars, you just need to add this to your css:
.hamburger.active .bar {
background-color: gray;
}
You wrote that you want the color to change from white to black and vice versa, but i wouldnt recommend you that, because you cant see the white bars on a white background. This is why i set the color to gray in this example.
Also, you made a mistake with the layering. You can see the hamburger infront of the menu when its open. To fix this, just set z-index to 2:
.nav-menu {
z-index: 2;
}
Here's a full example:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
});
document.querySelector(".nav.link").forEach((n) =>
n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
})
);
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 1000px) {
.hamburger {
display: block;
}
.hamburger.active .bar {
background-color: gray;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 0px;
gap: 0;
flex-direction: column;
background-color: black;
width: 100%;
text-align: center;
z-index: 2;
}
.nav-item {
margin: 16px 0;
display: flex;
flex-direction: column;
}
.nav-menu.active {
left: 0;
}
.menu a {
color: white;
}
}
<nav id="nav" class="navbar">
<ul class="nav-menu">
<li id="current" class="nav-item">
<a
href="file:///C:/Users/.../index.html"
class="nav-link"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
class="nav-link"
>About</a
>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>

Hamburger menu doesn't close after click on anchor tag

After clicking on some anchor item in the menu I want to be able to close the menu, but it doesn't work. The remove method in javascript is not working for some reason. If I go through pages the menu closes itself but not on the index page and it stays open. I'm still learning Javascript so bear with me. Here's the additional CSS
const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
netflix_open_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') });
});
netflix_close_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover{
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: .4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: .2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: .2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: .4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width:768px){
.netflix-logo{
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i>
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button class="netflix-nav-btn netflix-close-btn">
<i class="fas fa-times"></i>
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
Danish<img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

You need to attach an event listener to each <a> element.
const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
const netflix_btns = document.querySelectorAll('.netflix-list a');
netflix_open_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.add('visible')
});
});
netflix_close_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove('visible')
});
});
var length = netflix_btns.length;
for (let x = 0; x < length; x++) {
netflix_btns[x].addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove('visible')
});
});
}
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover {
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: .4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: .2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: .2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: .4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width:768px) {
.netflix-logo {
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i>Open
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button class="netflix-nav-btn netflix-close-btn">
<i class="fas fa-times"></i>Close
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
Danish<img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

for that you will have to create a function which you can call every time you click a link!
const netflix_open_btn = document.querySelector(".netflix-open-btn");
const netflix_nav = document.querySelectorAll(".netflix-nav");
netflix_open_btn.addEventListener("click", () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.add("visible");
});
});
function closeTab() {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove("visible");
});
}
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover {
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: 0.4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: 0.2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: 0.2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: 0.4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width: 768px) {
.netflix-logo {
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i> open
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button
onclick="closeTab()"
class="netflix-nav-btn netflix-close-btn"
>
<i class="fas fa-times"></i>close
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>
<a onclick="closeTab()" href="index-en.php" class="gold">Home</a>
</li>
<li><a onclick="closeTab()" href="#about">About</a></li>
<li><a onclick="closeTab()" href="#services">Services</a></li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
<a href="index.php">Danish</a
><img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

Meybe it doesnt close because there is no page change, thus no reload.
You could use some js to close it manually. Your example there is not close function related to item click. Ex.:
netflix_nav.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});

How to close navigation bar when I click on other contents in the webpage

I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.

The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.

SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});

You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>

jQuery toggleClass fade works with one class, not with the other?

I want my i elements to lose the outline class on hover, but for some reason this is not working. The class is lost and added again instantly without a fade/delay. If I try this exact same code with a class of background then it does work. What am I not seeing here?
The second problem is that when I do try this with a background class, the background stays there for the duration of the fade (in this case 500ms) and then disappears instantly. This should also be a fade, like a fade out.
Thank you!
JSFiddle
$('nav a').hover(function(){
if (!$(this).find("i").hasClass("home")){
$(this).find('i').toggleClass('outline', 500);
}
})

.hover() can be passed 2 functions as arguments. The first is like .mouseover() and the second is the .mouseout()
$('nav a').hover(function() {
$(this).find('.home').removeClass('outline');
}, function() {
$('.home').addClass('outline');
})
Update
You can add fadein and fadeout effect without Javascript, only with css:
nav {
font-size: 20 px;
}
nav a {
padding-left: 30 px;
}
nav a i {
position: absolute;
left: 0;
}
nav a i.star: not(.outline) {
opacity: 0;
transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
opacity: 1;
transition: opacity 300 ms ease;
}
Demo here.

With the help of [Radonirina Maminiaina][1]'s answer and some altering of the code by myself I made it work exactly as intended.
It was Radonirina's idea to put the second icon right behind the original icon by using position: absolute; (see his code above), but then I came up with the idea to add the class "dark" to the hidden icon underneath and simply select it to make the opacity 0, and 1 on hover, including the transition effect. This made the CSS a lot simpler and it works beautifully.
Thanks again!
Here is a working example of the end result:
$('.menu-toggle').click(function() {
$('nav').toggleClass('nav-open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */
header {
position: fixed;
height: 50px;
width: 100%;
background: #666666;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
color: #222;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
font-family: Fjalla One;
}
.smallNav {
position: absolute;
top: 100%;
right: 0;
background: #CCCCCC;
height: 0px;
overflow: hidden;
}
.nav-open {
height: auto;
}
.smallNav a {
color: #444;
display: block;
padding: 1.5em 4em 1.5em 3em;
border-bottom: 1px solid #BCBCBC;
}
.smallNav a:last-child {
border-bottom: none;
}
.smallNav a:hover,
.smallNav a:focus {
color: #222;
background: #BABABA;
}
/* Menu toggle */
.menu-toggle {
padding: 1em;
position: absolute;
right: 1em;
top: 0.75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: white;
height: 3px;
width: 1.5em;
border-radius: 3px;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.menu-toggle:hover {
transform: scale(1.1);
}
i.icon {
margin-right: 0.5em !important;
font-size: 1.2em !important;
}
/* Change icons on hover */
nav a i.dark {
position: absolute;
left: 42px;
}
nav a i.dark {
opacity: 0;
transition: opacity .25s ease;
}
nav a:hover i.dark {
opacity: 1;
transition: opacity .25s ease;
}
nav a:hover i.outline {
opacity: 0;
transition: opacity .25s ease;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<header>
<div class="header-container">
<nav class="smallNav">
<ul>
<li><i class="icon home"></i>Home</li>
<li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li>
<li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li>
<li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li>
<li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger">
</div>
</div>
</div>
</header>

Create an animation from left to the middle

I need to create an animation which will make a menu appear from the left side of the screen. This animation should be started on a click on a button.
The content of the menu should recover 55% of the width of the main page.
JSFiddle Demo
In the previous link you can the the menu and the button to move left. At the beginning the menu (with the "link" elements) should be hidden and the button .glyhicon should be at the very left of the page.
On click on this button the menu and the button should move to the right and recover 55% of the main page.
The problem is I don't know how to do this. (I managed to move the menu by changing the structure but I couldn't move the button.)
Here is my HTML code
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
<div id="icon-menu" class="test">
<button id="button_menu" class="js-menu menu" type="button">
<span class="glyphicon glyphicon-map-marker"></span>
</button>
</div>
</div>
CSS :
#left-menu {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#map-menu, #icon-menu {
display: inline-block;
vertical-align: middle;
}
.menu {
background: 0;
float: left;
margin: 2rem;
height: 2.7rem;
width: 3.5rem;
z-index: 2;
outline: 0;
padding: 0;
border: 0;
}
.menu_content{
width: 60%;
height: 100%;
background: #eaeaea;
position: fixed;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
padding-top: 6.2rem;
z-index: 1;
}
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
javascript :
var isActive = false;
$('.js-menu').on('click', function() {
if (isActive) {
$(this).removeClass('active');
$('#left_menu').removeClass('menu-open');
/*$('#button_menu').removeClass('move-right');
$('#button_menu').addClass('move-left');*/
} else {
$(this).addClass('active');
$('#left_menu').addClass('menu-open');
/*$('#button_menu').removeClass('move-left');
$('#button_menu').addClass('move-right');*/
}
isActive = !isActive;
});
Could you help me to adapt or redo the animation please ?

Here's a pure CSS solution without any javascript by making use of the :checked status of a hidden checkbox with display:none, the label for that checkbox should be outside the #left-menu element so it is possible to target it using ~:
JS Fiddle 1
#button_menu {
display: none;
}
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: fixed;
left: 5px;
top: 50%;
transition: all 1s;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -100%;
width: 55%;
top: 50%;
transition: all 1s;
}
#button_menu:checked + .glyphicon {
left: 55%;
transition: all 1s;
}
#button_menu:checked ~ #left-menu {
left: 0;
transition: all 1s;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<input type="checkbox" id="button_menu" class="js-menu">
<label for="button_menu" class="glyphicon"></label>
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
and here's a simple jQuery solution, where basically we have a variable as a triggering flag toggleFlag, if its value is true the left value is 0, while if the triggering flag value is false then the left value is -55% -which is the menu width as the op said it takes 55% of the screen-, then we animate the .left-menu dependign on the left value, and we need to negate the value of the triggering flag.
JS Fiddle 2
var menuIcon = $('.glyphicon'),
leftMenu = $('#left-menu'),
toggleFlag = true;
menuIcon.on('click', function() {
var leftVal = (toggleFlag) ? '0' : '-55%';
$('#left-menu').animate({'left': leftVal }, 700);
toggleFlag = !toggleFlag;
});
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: absolute;
right: -45px;
top: 5px;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -55%;
width: 55%;
top: 50%;
}
.slideIt {
color: red;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="left-menu">
<span class="glyphicon"></span>
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>

There a couple things with your example and fiddle, to start it helps to have jquery loaded in the fiddle to mess around.
Next isActive is not only not defined but unnecessary
if (isActive) {
should be replaced by
if ($(this).hasClass('active')) {
and
isActive = !isActive;
can be removed completely
next you becareful with your underscores and hyphens
$('#left-menu') != $('#left_menu')
Please also wrap it all in a document ready so it can be attached when the page loads
$(document).ready(function () {
// code
});
so with the fixes you can have something like:
$(document).ready(function () {
$('.js-menu').on('click', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#left-menu').removeClass('menu-open');
} else {
$(this).addClass('active');
$('#left-menu').addClass('menu-open');
}
});
});
Now to move your button, the problem is you're adding the transform to the <nav> in the menu-open class with :
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
So one way to fix that would be to also add it to your button
.menu-open #icon-menu {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
OR
.menu-open .active {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
I'll leave you to do the slide animation and so on.
There's a couple ways to make it better than this but with what you have for now this'll probably help you get a start on it? Maybe?