Develop Reference

Toggle pop up on button click

i am trying to toggle an menu on a mouseclick. Usually i did this with an image and href but on this project i took an existing button from the web and i cant figure it out working.
Here's my code:
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
$(document).ready(function() {
$("#nav1").on("click", function() {
$("popup").toggleClass("open");
});
});
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
padding-bottom: 200px;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
#popup {
position: fixed;
height: 100%;
width: 100%;
background-color: white;
display:none;
opacity: 0;
transition: 0.5s;
}
#popup.open {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popup">
<nav id="main-nav">
<ul>
<li>Home</li>
<li>Über uns</li>
<li>Galerie</li>
</ul>
</nav>
</div>
I am absolutely clueless.
I want to achieve that when the Button is clicked, the popup window opens and when i click it again that i closes.

You forgot to put # before popup since it is id.
$(document).ready(function() {
$("#nav1").on("click", function() {
$("#popup").toggleClass("open");
});
});

How to reset hamburger menu icon back to unopened after link inside of menu is clicked?

So I decided to animate my hamburger menu, which was previously unanimated, so this problem was irrelevant to begin with.
The animation starts as a standard hamburger style menu which has several links to different areas of the homepage. When clicked, I animated the menu to turn from a hamburger to an x, indicating to visitors that they can close the menu by clicking on the x. I ran into a problem though, after clicking on a link within the hamburger menu, the icon does not reset from an x back to the hamburger, and that messes up how the menu is opened on the second time. If a visitor were to open it again, the x would turn into the hamburger when the x is clicked on, and it wouldn't make any sense.
Anyways, I'm just wondering if there's a way I could make it so that when a link in the menu gets clicked on, the x returns to its unopened hamburger form. Here's my code:
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
$(document).ready(function(){
$('.icon').click(function(){
$(this).toggleClass('open');
});
});
.header {
position: absolute;
top: 0px;
left: 0px;
width: 327px;
height: 70px;
line-height: 70px;
padding-left: 15px;
font-family: 'Burbank', 'Alegreya Sans SC', 'Alegreya Sans SC Black', sans-serif;
font-size: 40px;
color: #ffffff;
z-index: 2;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.heading {
position: absolute;
top: 0px;
left: 0px;
width: 327px;
height: 67px;
padding-left: 15px;
z-index: 3;
}
.nav {
position: absolute;
top: 0px;
height: 70px;
background-color: #223861;
box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
-webkit-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
-moz-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
text-align: right;
z-index: 1;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.icon {
position: relative;
float: right;
width: 100px;
height: 70px;
padding-left: 13px;
cursor: pointer;
-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;
}
.icon span {
position: absolute;
left: 0;
display: block;
height: 5px;
width: 45px;
margin-left: 75px;
margin-top: 18px;
background: #ffffff;
border-radius: 4px;
opacity: 1;
-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 span:nth-child(1) {
top: 0px;
}
.icon span:nth-child(2) {
top: 12px;
}
.icon span:nth-child(3) {
top: 24px;
}
.icon.open span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.icon.open span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.header {
width: 90%;
}
.icon {
display: block;
padding-right: 22px;
cursor: pointer;
}
.menu {
max-height: 0px;
transition: max-height .5s ease-in-out;
opacity: 0;
overflow: hidden;
}
.menu a {
display: block;
height: 8vh;
line-height: 8vh;
margin: 0px;
padding: 0px 0px;
border-bottom: 1px solid #eaeaeb;
}
#toggle {
display: none;
}
#toggle:checked + .menu {
max-height: 800px;
opacity: 1;
}
#toggle:not(checked) + .menu {
max-height: 0px;
opacity: 1;
}
<label class="nav" for="toggle" style="z-index:999;">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
Assault Rifles
Submachine Guns
Shotguns
Sniper Rifles
Pistols
Explosives
Other
Vaulted
</div>
</label>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

Simply add this click handler inside of the $(document).ready() function to remove the open CSS class from the hamburger icon when one of the menu links is clicked:
$('.menu a').click(function() {
$('.icon').removeClass('open');
});

You can do this by PURE CSS also
.navigation__checkbox {
display: none
}
.navigation__button {
height: 7rem;
width: 7rem;
position: fixed;
top: 1rem;
left: 1rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer
}
.navigation__icon {
position: relative;
margin-top: 3.5rem;
user-select: none;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
width: 3rem;
height: 2px;
background-color: #333;
display: inline-block
}
.navigation__icon::before,
.navigation__icon::after {
content: "";
position: absolute;
left: 0;
transition: all .2s
}
.navigation__icon::before {
top: -.8rem
}
.navigation__icon::after {
top: .8rem
}
.navigation__button:hover .navigation__icon::before {
top: -1rem
}
.navigation__button:hover .navigation__icon::after {
top: 1rem
}
.navigation__checkbox:checked+.navigation__button .navigation__icon {
background-color: transparent
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
top: 0;
transform: rotate(135deg)
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
top: 0;
transform: rotate(-135deg)
}
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
</div>

Hamburger icon not responding

I am trying to make my hamburger icon drop the navigation bar. The icon works and is responsive, however the overlay does not drop.
https://jsfiddle.net/run1kqmj/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
z-index: 3;
}
.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);
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<div class="overlay-content">
<h4>
Home<br>
V-Plus<br>
Carbon Edition<br>
Special Edition<br></h4>
</div>
</div>
<div class="container" onclick="myFunction(this);runNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
function runNav() {
if (document.getElementById("myNav").style.height = "0%");
{document.getElementById("myNav").style.height = "100%"};
{document.getElementById("myNav").style.height = "0%"};
}
</script>
When I manually make the overlay 100%, to preview the look, I am then unable to interact with the hamburger icon. It will not perform it's action.
I set the ("myNav").style.height = "5%"}; and it would cover over the icon and I would be unable to interact where the overlay was.

Your javascript for enabling the overlay was broken. I also added some margin-top to the overlay in order to make the icon accessible.
function myFunction(x) {
x.classList.toggle("change");
}
function runNav() {
if (document.getElementById("myNav").style.height == 0 || document.getElementById("myNav").style.height == "0%") {
document.getElementById("myNav").style.height = "100%";
}
else {
document.getElementById("myNav").style.height = "0%";
}
}
.overlay {
height: 0%;
margin-top: 50px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
z-index: 3;
}
.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);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myNav" class="overlay">
<div class="overlay-content">
<h4>
Home <br>
V-Plus<br>
Carbon Edition<br>
Special Edition<br></h4>
</div>
</div>
<div class="container" onclick="myFunction(this);runNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</body>
</html>

navigation button making locations apear

for some reason i cant make the navigation locations apear and disapear. i am not good at java script but i think that is the problem. i am trying to make the locations: WebDesign, Photography, SketchUp, Photoshop, About, Home apear when i press the 3 bars. the bars can change into a cross no problem.
function rotatebar(x) {
x.classList.toggle("rotate");
}
.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.rotate .navloc {
opacity: 1;
}
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>

You need to add .navlov as opacity:0 and display: inline-block in css. I added working snippet look at it.
function rotatebar(x) {
x.classList.toggle("rotate");
}
body {
background: #000;
}
.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline-block;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.navloc {
opacity: 0;
}
.rotate .navloc {
opacity: 1;
}
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>

Rotating an element with JQuery

I'm creating a basic layout to test my knowledges. I have been creating a menu and I decided to customize it. I want to rotate of 90 degrees the icon made up of 3 vertical lines every time users click on it ( This icon is visible only when the page is despayed on smartphones- #media(max-size: 968px). This icon show the menu when it's clicked. I read how to do it by googling too, but I haven't found an answer yet. Do I have to use css or animate? can I reach to the target with rotate method ? Can you show me the correct way? I don't understand how to use them to rotate the icon.
$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
});//end of $buttonNav
});//end of the start
/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}
body{ background: #eee; }
/*----------
HEADER
-----------*/
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }
/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}
#media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}
/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}
}
*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
<div class="header__background">
<a class="header__icon-bar" href="">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="header__nav">
<li class="header__nav__item"> Home </li>
<li class="header__nav__item"> Contact </li>
<li class="header__nav__item"> Apply </li>
<li class="header__nav__item"> About </li>
</ul>
</header>

This can be accomplished through CSS3's transform.
$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
$('.header__icon-bar').toggleClass('rotate90')
});//end of $buttonNav
});//end of the start
.rotate90 {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}
body{ background: #eee; }
/*----------
HEADER
-----------*/
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }
/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}
#media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}
/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}
}
*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
<div class="header__background">
<a class="header__icon-bar" href="">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="header__nav">
<li class="header__nav__item"> Home </li>
<li class="header__nav__item"> Contact </li>
<li class="header__nav__item"> Apply </li>
<li class="header__nav__item"> About </li>
</ul>
</header>

CSS Transform could do what you need. Make a class for each 'state' of the transformation. Change the classes per state change. If there are two states there will be a normal state and a rotated state. When user clicks the 3 lines the class is changed from normal state to rotated state. You will need an onclick event to check whether the img you clicked has either the normal class or the rotated class.
if($('this').attr('class')=='normal'){
///switch to rotated class
}
Do counter else if statement for if the image is already rotated.
if($('this').attr('class')=='rotatedl'){
///switch to normal class
}
ps the classes will be calling the transform keyframe you create! Need to create the keyframe transform animation before you can call the class that uses it.
https://www.w3schools.com/cssref/css3_pr_transform.asp

$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
if( $('.header__nav').hasClass('is-open')){
$('.header__icon-bar').css('transform','rotate(90deg)')
}else{
$('.header__icon-bar').css('transform','rotate(0deg)')
}
});//end of $buttonNav
});//end of the start

you can add animation to make it smooth:
.animated {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes rotate-right {
from {
opacity: 0;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
opacity: 1;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
See full demo
$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
if($('.header__icon-bar').hasClass('rotate-right')){
$('.header__icon-bar').removeClass('rotate-right');
$('.header__icon-bar').toggleClass('rotate-left');
}else{
$('.header__icon-bar').removeClass('rotate-left');
$('.header__icon-bar').toggleClass('rotate-right');
}
});//end of $buttonNav
});//end of the start
/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}
body{ background: #eee; }
/*----------
HEADER
-----------*/
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }
/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}
#media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}
/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}
}
*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.animated {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes rotate-right {
from {
opacity: 0;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
opacity: 1;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes rotate-right {
from {
opacity: 0;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
opacity: 1;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
.rotate-right {
-webkit-animation-name: rotate-right;
animation-name: rotate-right;
}
#-webkit-keyframes rotate-left {
from {
opacity: 0;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
opacity: 1;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate-left {
from {
opacity: 0;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
opacity: 1;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.rotate-left {
-webkit-animation-name: rotate-left;
animation-name: rotate-left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
<div class="header__background">
<a class="header__icon-bar animated" href="">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="header__nav">
<li class="header__nav__item"> Home </li>
<li class="header__nav__item"> Contact </li>
<li class="header__nav__item"> Apply </li>
<li class="header__nav__item"> About </li>
</ul>
</header>