gulamjilani

khan

by Gulam Jilani

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<input type="checkbox" id="toggle" />
<nav id="site-nav" class="site-nav">
  <div class="container">
    <div class="logo"><a href="#">my<strong>Nav</strong></a></div>
    <label class="navBars" for="toggle"> <i class="fa fa-bars"></i> </label>
    <ul id="menu" class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

CSS

body { background: #3d3d54;  }

.site-nav {
  background: #efefef;
  color: #1a1b18;
  max-height: 70px;
  position: relative;
}
.img{
	width:100%;
	float:left;
	margin:10px 0 0;
}
.site-nav a { text-decoration: none; }

.site-nav .logo {
  display: inline-block;
  color: #fff;
  font-size: 1.7em;
  height: 40px;
  line-height: 1.55em;
  letter-spacing: -2px;
  text-transform: uppercase;
  padding: 0 10px;
  z-index: 0;
  /*POSITION*/
  position: relative;
}

.site-nav .logo:hover:before { background: #292938; }

.site-nav .logo:before {
  content: "";
  background: #3C91E6;
  z-index: -1;
  /*POSITION*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.site-nav .logo a { color: #efefef; }

.site-nav .menu {
  background: #efefef;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #d9d9d9;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  /*POSITION*/
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
}

.site-nav .menu a {
  color: #292938;
  border-bottom: 1px solid #d9d9d9;
  font-weight: bold;
  display: block;
  padding: 15px;
}

.site-nav .menu a:hover {
  background: #292938;
  color: #efefef;
}

.site-nav .navBars {
  display: inline-block;
  font-size: 1.7em;
  line-height: 1.5em;
  float: right;
  /*USER SELECTION*/
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  cursor:pointer;
}

#toggle {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -99999px;
}

#toggle:checked ~ nav .menu { display: block; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px;
}
 @media screen and (min-width: 600px) {

.site-nav .navBars { display: none; }

.site-nav .container {
  padding-top: 0;
  padding-bottom: 0;
}

.site-nav .logo { margin: 10px 0; }

.site-nav .menu {
  display: block;
  box-shadow: none;
  border: none;
  float: right;
  /*POSITION*/
  position: static;
}

.site-nav .menu li {...

JavaScript

"use strict";
	var myNav = {
		init: function () {
			this.cacheDOM();
			this.browserWidth();
			this.bindEvents();
		},
		cacheDOM: function () {
			this.navBars = $(".navBars");
			this.toggle = $("#toggle");
			this.navMenu = $("#menu");
		},
		browserWidth: function () {
			$(window).resize(this.bindEvents.bind(this));
		},
		bindEvents: function () {
			var width = window.innerWidth;

			if (width < 600) {
				this.navBars.click(this.animate.bind(this));
				this.navMenu.hide();
				this.toggle[0].checked = false;
			} else {
				this.resetNav();
			}
		},
		animate: function (e) {
			var checkbox = this.toggle[0];

			if (!checkbox.checked) {
				this.navMenu.slideDown();
			} else {
				this.navMenu.slideUp();
			}

		},
		resetNav: function () {
			this.navMenu.show();
		}
	};
	myNav.init();