mobile navigation

by Gulam Jilani

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.nav a{
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: returnToNormal;
	animation-name: returnToNormal;
}
		
@-webkit-keyframes returnToNormal {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes returnToNormal {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

</style> 


<div class="header">
            <div class="header-icon header-icon-out"><span></span><span></span></div>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li> <a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

CSS

body {
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	font-family: 'Source Sans Pro', sans-serif;
}
/*-this item to take to your html page---*/

/*-this item to take to your html page---*/

.mai_header{
    width:1000px;
    float:left;
    padding:10px;

}

.logo{

    width:30%;
    float:left;
    margin-right:10%;
    height:100px;
    background:#808080;
}

.header{
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	position: relative;
	top: 0px;
	left: 0px;
}
.nav{
	background-color: rgba(0,0,0,0.9);
	width: 100%;
    float:left;
}
.nav ul{

    margin:0; padding:0; display:block;

}
.nav ul li{
    margin:0; 
    padding:0;
    z-index:999;
    float:left;
    list-style:none;
}
.nav ul li a{
    color: #ffffff;
    float: left;
    font-weight: 300;
    line-height: 20px;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
.nav ul li a:hover{
	color: rgba(255,255,255,0.4);

    background:rgba(255,255,255,0.3);

}

/*-------responsive css start----*/
@media(max-width:767px){




    .header-icon{
	color: #ffffff;
	height: 50px;
	font-size:25px;
	text-align: center;
    margin:0 auto;
	width: 50px;
	position: relative;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
	transition: background 0.5s;
}
.header-icon:hover{
	background-color: rgba(255,255,255,0.2);
	cursor: pointer;
}
.header-icon span{
	position: absolute;
	left: calc((100% - 25px) / 2);
	top: calc((100% - 1px) / 2);
	width: 25px;
	height: 1px;
	background-color: rgba(255,255,255,1);
}
.header-icon span:nth-child(1){
transform: translateY(4px) rotate(0deg);
	}
.header-icon span:nth-child(2){
transform: translateY(-4px) rotate(0deg);
	}
	



	
.header-icon-click span:nth-child(1){
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: clickfirst;
	}		
.header-icon-click span:nth-child(2){
	animation-duration: 0.5s;
	animation-fill-mode:...

JavaScript

$(document).ready(function(){





$(".header-icon").click(function(){
	$(this).toggleClass("header-icon-click header-icon-out");
	$(".nav").slideToggle(250);
});




  $(".nav a").each(function( index ) {
  	$( this ).css({'animation-delay': (index/10)+'s'});
  });
		



});