Create a responsive navigation

written by Web designers London on May 30, 2013 in Freebies and Tutorials and Web design with no comments

Create a responsive navigation

In this post you will learn how to create a responsive navigation. Now with more and more people viewing websites on all different media devices, it is important you cater for the millions of smart phone users.

In this tutorial we will looking at a standard web page layout that when viewed on a smaller screen size the main navigation disappears and is replaced with a menu drop down icon, that when clicked displays the navigation. Take a look at what we will be creating here.

So lets get started, firstly we will start with the HTML mark up before the HEAD tag we need to insert the jQuery code. We are linking to the latest jQuery code.

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script>
$(function(){
var nb = $(‘#nav-drop’);
var n = $(‘#navigation nav’);

$(window).on(‘resize’, function(){

if($(this).width() < 570 && n.hasClass(‘keep-nav-closed’)) {
$(‘#navigation nav’).hide().removeAttr(‘class’);
}
if(nb.is(‘:hidden’) && n.is(‘:hidden’) && $(window).width() > 590) {
$(‘#navigation nav’).show().addClass(‘keep-nav-closed’);
}
});

$(‘#navigation nav a,#navigation h1 a,#btmnav nav a’).on(‘click’, function(e){
e.preventDefault();
});

$(‘#nav-drop’).on(‘click’, function(e){
e.preventDefault();
$(“#navigation nav”).slideToggle(350);
});

});
</script>

Below is the actual HTML code, the ID nav-drop is the responsive navigation drop down icon. While in full screen mode we set the CSS to hide this untill the the screen resolution is under 590px

<div id=”wrapper”>

<div class=”header”>
<header id=”navigation”>
<h1 class=”logo”>Responsive Navigation</h1>
<nav>
  <ul>
    <li><a href=”#” class=”active”>Home</a></li>
    <li><a href=”#”>Team</a></li>
    <li><a href=”#”>Gallery</a></li>
    <li><a href=”#”>News</a></li>
    <li><a href=”#”>Contact</a></li>
  </ul>
</nav>
<a href=”#” id=”nav-drop”>Menu</a>
</header>

<div class=”clear”></div>
</div>

<div class=”container”>
    <h1>Creating a Responsive navigation</h1>
    <p>Main text in here</p>
</div>
</div>

Now we have the CSS style sheet below is CSS for standard screen size. The whole website is wrapped in a div that has a maximum width of 955px. To keep the wrapper centered we have added the margin as auto.

#wrapper {
max-width:955px;
margin:auto;
padding:0 20px;
}
.head-strip {
height:48px;
width:100%;
background:url(../img/head-strip.png) repeat-x;
}
.header {
border-bottom:1px solid #719dad;
width:100%;
padding:20px 0;
margin:0 0 30px 0;
}
.logo { width:320px; float:left;}

/* navigation bar */
#navigation {}
#nav-drop {
display: none;
float: right;
top: 0;
width: 20px;
height: 70px;
background:url(../img/nav-drop.png) center no-repeat;
text-indent: -99999px;
overflow: hidden;
}
#navigation nav { float:right; margin:5px 0 0 0;}
#navigation nav ul { list-style: none;}
#navigation nav ul li {
display: block;
float: left;
font-size: 1.4em;
margin-right: 4px;
}
#navigation nav ul li a {
display: block;
text-decoration: none;
color: #719dad;
padding: 0 0 0 20px;

}
#navigation nav ul li a:hover { color: #4a7888;}

Below is the media query that activates when the screen size is 590 pixels and under.

/* responsive navigation drop down */
@media screen and (max-width: 590px) {
#navigation { height: auto; }
#navigation nav {
display: none;
position: static;
width: 100%;
top: auto;
right: auto;
}
#navigation nav ul li { float: none; margin: 0; }
#navigation nav ul li a {
display: block;
width: 96%;
line-height: 1.4em;
border: 0;
padding: 5px;
background: #FFF;
border:1px solid #719dad;
border-top:none;
text-align:center;
}
#navigation nav ul li a:hover {
background: #dbeff7;
}
#navigation nav ul li a.active {
color: #4a7888;
background: #dbeff7;
}

#navigation #nav-drop {
display: block;
}
}

You can view the live demo here