How to Create a Responsive Navigation Menu with jQuery and CSS3

I am assuming that you have some basic knowledge of CSS and know what is a Responsive Layout – including menus.

In short responsive layout is when content display format adjusts to the viewport’s width and height.

Also we are talking about horizontally laid out menus only for this tutorial.

We have 2 ways to make a menu responsive

1. Stack the menu items one top of another – which is clumsy

2. Convert the menu to a drop down list -which is the way to go!

We are using the 2nd option here.

For any responsive design start out with the code below between <head> and </head> tags.

<meta name="viewport" content="width=device-width, initial-scale=1">

Using this meta tag is like telling the browser that “this website adapts to your View-Port width”.

Important: Do not use this on a non-responsive site. Using this tag on a non-responsive site will make the website zoom to the top left corner, forcing the users to zoom out and zoom in to see the content which is not a good user experience.

Next – create the basic HTML needed for the menu. Code given below.


<!doctype html>

<html>

<head>

</head>

<body>

<div id="menu">

<ul>
<li><a href="#1">One Healthy Browny Dog</a></li>

<li><a href="#2">Two Healthy Browny Dogs</a></li>

<li><a href="#3">Three Healthy Browny Dogs</a></li>

<li><a href="#4">Four Healthy Browny Dogs</a></li>

<li><a href="#5">Five Healthy Browny Dogs</a></li>

<li><a href="#6">Six Healthy Browny Dogs</a></li>

</ul>

</div>

</body>

</html>

As you can see, we have a <div> with id “menu” . This is where we are going to generate the drop-down menu once the view-port changes to width of a tablet or mobile device.

Next – generate the CSS code as follows. You can keep the code within <style> </style> codes or shift the entire block to an external file and call it using the <link rel=stylesheet> tag. For this short tutorial i am keeping the code embedded inside <head></head> tags.

CSS Code:


#menu ul{

list-style: none;

}

#menu ul li{

float: left;

padding: 7px;

border: 1px solid;
}

#menu ul{

display: block;
}

#menu select{

display: none;
}
@media screen and (max-width: 480px){

#menu ul{

display: none;
}

#menu select{

display: block;
}
}

Next – we will need a bit of jQuery magic to generate the drop-down. Call the latest version of Jquery library in header. You can use any applicable method here. I find it easy to use the following snippet inside <head></head> tags – it points to the latest Jquery library online.


<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" >
</script>

Next – insert the following block of code, again inside the head region.


<script type="text/javascript">

jQuery(document).ready(function($){
$("<select />").appendTo("#menu");

$("<option />",
{ "selected" : "selected", "value" : "", "text" : "Navigation" }
).appendTo("#menu select");

$("#menu a").each(function(){

$("<option />",
{ "value": $(this).attr('href'), "text": $(this).text() }
).appendTo("#menu select");

});

$("#menu select").change(function(){

window.location = $(this).find("option:selected").val();

});
});

</script>

This is the code block that generates the drop down menu. If you look at the CSS code at the top you will notice that we are hidding the drop-down created with this script as we dont want it displayed if the page is being viewed on a desktop.

The finished code on the page will look like below:


<!doctype html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if lt IE 9]>
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" >
</script>

<script type="text/javascript">

jQuery(document).ready(function($){
$("<select />").appendTo("#menu");

$("<option />",
{ "selected" : "selected", "value" : "", "text" : "Navigation" }
).appendTo("#menu select");

$("#menu a").each(function(){

$("<option />",
{ "value": $(this).attr('href'), "text": $(this).text() }
).appendTo("#menu select");

});

$("#menu select").change(function(){

window.location = $(this).find("option:selected").val();

});
});

</script>

<style type="text/css">

#menu ul{

list-style: none;

}

#menu ul li{

float: left;

padding: 7px;

border: 1px solid;
}

#menu ul{

display: block;
}

#menu select{

display: none;
}
@media screen and (max-width: 480px){

#menu ul{

display: none;
}

#menu select{

display: block;
}
}

</style>

 

</head>

<body>

<div id="menu">

<ul>
<li><a href="#1">One Healthy Browny Dog</a></li>

<li><a href="#2">Two Healthy Browny Dogs</a></li>

<li><a href="#3">Three Healthy Browny Dogs</a></li>

<li><a href="#4">Four Healthy Browny Dogs</a></li>

<li><a href="#5">Five Healthy Browny Dogs</a></li>

<li><a href="#6">Six Healthy Browny Dogs</a></li>

</ul>

</div>

</body>

</html>

For your convenience, you can also download the demo file with code below.

Let me know your feedback and suggestions below.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)
Demo Responsive menu
Demo Responsive menu
responsive1.zip
Version: 1
466.0 B
42 Downloads
Details...
This entry was posted in General, jquery, Web Design, Web Development. Bookmark the permalink. Both comments and trackbacks are currently closed.