<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Navigation bar</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="wrapper">
<div class="menu">
<h1>navbar</h1>
<ul>
<li><a href="#home"><i class="fa fa-terminal"></i>home</a></li>
<li><a href="#about"><i class="fa fa-codepen"></i>about</a></li>
<li><a href="#news"><i class="fa fa-newspaper-o"></i>news</a></li>
<li><a href="#contact"><i class="fa fa-paper-plane-o"></i>contact</a></li>
</ul>
</div>
<div class="content">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300);
body{
background-color:#28363D;
font-family:"Roboto";
color: #fff;
}
.menu{
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: #212121;
width: 250px;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 10px #000;
}
.active{
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
}
h1{
margin-top:150px;
}
ul{
padding:0;
list-style:none;
font-size:14px;
}
li{
padding:7px 10px;
}
a{
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:"Roboto";
font-size: 18px;
font-weight: 300;
}
a:hover{
text-decoration: line-through;
}
.content{
position:relative;
width:400px;
}
.button{
width:50px;
height:50px;
margin:70px 97px;
padding: 10px;
cursor:pointer;
}
.line{
width: 40px;
height: 2px;
background-color:#fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first{
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second{
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top{
width: 40px;
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom{
width: 40px;
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);