CODE FOR HAMBURGER MENU

<link rel="stylesheet" href="css/style.css">

<div class="container_12">
<div class="grid_12">
<center><font size="8"><a href="index.html"><img src="images/logo.jpg" alt=""
height="80" width="400" ></a></font></center>
<p></p>
<div class="menu_block">
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger"><span>Menu</span></a>
<ul>
<li class="current bt-icon"><a href="index.html">Home</a></li>
<li class="bt-icon"><a href="index-1.html">About</a></li>
<li class="bt-icon"><a href="index-2.html">Services</a></li>
<li class="bt-icon"><a href="index-3.html">Clients</a></li>
<li class="bt-icon"><a href="index-4.html">Blog</a></li>
<li class="bt-icon"><a href="index-5.html">Contacts</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>

stylesheet

@import "../css/grid.css";
@import "../css/menu.css";

gird.css
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}

.grid_12 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.container_12 .grid_12 {
width: 940px;
}
.container_12:before,
.container_12:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}

menu.css
.menu_block {
height: 31px;
position: relative;
overflow: hidden;
margin-bottom: 43px;
}
.page1 .menu_block {
margin-bottom: 46px;
}
nav.bt-menu ul li {
font: bold 18px/26px 'Open Sans', sans-serif;
color: #848282;
}
nav.bt-menu ul li:first-child+li+li {
margin-right: 120px;
}
.bt-overlay {
display: none;
}
nav.bt-menu ul li a:hover, nav ul li.current {
color: #242424;
}
.container {
padding: 80px;
}
.bt-menu {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 0;
border-width: 0px;
border-style: solid;
border-color: #333;
background-color: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}
.bt-menu.bt-menu-open {
height: 100%;

-webkit-transition: border-width 0.3s, background-color 0.3s;

transition: border-width 0.3s, background-color 0.3s;
}
.bt-overlay {
position: absolute;
width: 100%;
}
.bt-menu-open .bt-overlay {
height: 100%;
}
.bt-menu-trigger {
position: absolute;
top: 0;
left: 50%;
z-index: 100;
display: block;
margin-left: -27px;
width: 54px;
height: 31px;
cursor: pointer;
}
.bt-menu-trigger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 4px;
margin-top: -2px;
background-color: #585858;
font-size: 0px;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bt-menu-open .bt-menu-trigger span {
height: 7px;
margin-top: -4px;
}

.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #585858;
content: '';
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.bt-menu-trigger span:before {
-webkit-transform: translateY(-175%);
transform: translateY(-175%);
}
.bt-menu-trigger span:after {
-webkit-transform: translateY(175%);
transform: translateY(175%);
}
.bt-menu-open .bt-menu-trigger span:before,
.bt-menu-open .bt-menu-trigger span:after {
}
.bt-menu.bt-menu-open ul li:first-child,
.bt-menu.bt-menu-open ul li:last-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.bt-menu.bt-menu-open ul li:nth-child(2),
.bt-menu.bt-menu-open ul li:nth-last-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.bt-menu.bt-menu-open ul li:nth-child(3),
.bt-menu.bt-menu-open ul li:nth-last-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.bt-menu-open .bt-menu-trigger span:before {
-webkit-transform: translateY(-175%);

transform: translateY(-175%);
height: 7px;
}
.bt-menu-open .bt-menu-trigger span:after {
-webkit-transform: translateY(175%);
transform: translateY(175%);
height: 7px;
}
.bt-menu ul {
position: absolute;
bottom: 0px;
left: 0;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
white-space: nowrap;
height: 0;
-webkit-transition: height 0s 0.3s;
transition: height 0s 0.3s;
}
.bt-menu.bt-menu-open ul {
height: 31px;
-webkit-transition: none;
transition: none;
}
.bt-menu ul li,
.bt-menu ul li a {
text-align: center;
}
.bt-menu ul li {
display: inline-block;
margin: 0 26px;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.bt-menu.bt-menu-open ul li {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

}
.bt-menu ul li a {
display: block;
outline: none;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.bt-menu ul li a:before {
display: none;
}