Building a Responsive Navigation Menu

In today's blog post, I'm going to demonstrate how to make a horizontal responsive navigation menu anywhere on your webpage. This tutorial also demonstrates how to make a completely responsive web site if you follow it through. Here is a link to the final product:

http://jafty.com/ResponsiveSite.html

If you want a vertical responsive menu, you can adapt the code accordingly yourself. I am posting this here for reference because it seems like every time I have to do this for a responsive website, I have to relearn it. Now myself and anyone else that needs the technique can find it right here. Another appropriate title for this tutorial could have been how to make a responsive image map since that is what led me to doing this in the first place.

Using Divs Instead of Image Maps

While this tutorial is technically about doing a navigation menu, this exact same method can be used in place of image maps because, if you've tried to make a responsive page that has an image map in it, you know it doesn't work well.

Building a Responsive Nav

First, lets' build our HTML:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="page">
<div id="header-menu-overlay">
<img src="topnav0map.png" style="width:100%;"  border="0" alt="top navigation menu"/>
<div>
    <div>
        <div><a href=""></a></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</div>
</div>
</body>
</html>

To follow along with the tutorial, copy and paste the above code into a new notepad document and save it as test.html. The first div includes an img tag in it as you can see above. Here is the actual image to give you a better idea of what I have done here. So "topnav0map.png" refers to the following image:

topnav0map.png:
topnav0map

Again, if you're following along, right click on the above image and save it to the same directory as your test.html file. I put the image in a blue background here so you can see it because it is mostly white over a transparent layer done in Photoshop. The reason I use an image here is because it is responsive when you set the width to 100% and height to auto. This is about when I got the idea for an image map to link the items in the nav as you see them in the above image, but quickly found out that image maps do not resize well when changing either the page size or the zoom level when looking at the page live. therefore I used divs as they are more responsive when used properly with percentages as you'll see below when I get to the CSS part.

Responsive CSS Layout

The most important part is probably the responsive CSS code. Here is what I used:

#page{
position:relative;
width:100%;
max-width:900px;
background-color:#222288;
margin:0 auto;
min-height:1200px;
margin-top:25px;
}

.header_menu_overlay{
position: absolute;
top: 100px;
left:0px;
width: 100%;
min-height: 30px;
text-align: center;
z-index: 99999;
}
.navwrap{
top:-20px;
min-height:27px;
position: relative;
}

.nav_item_wrap{
position:relative;
width:100%;
max-width:1125px;
height:27px;
border: 1px solid brown;
margin:0 auto;
}

.nav_item{
position: relative;
border: 1px solid red;
height: 33px;
display: block;
float: left;
z-index: 999;
}

.nav_item a{
width: 100%;
height: 100%;
position: relative;
display: block;
}

.nav1{
width: 7%;
margin-left: 9%;
}

.nav2{
width: 10%;
margin-left: 1%;
}

.nav3{
width: 10%;
margin-left: 1%;
}

.nav4{
width: 20%;
margin-left: 1%;
}

.nav5{
width: 19%;
margin-left: 1%;
}

.nav6{
width: 10%;
margin-left: 1%;
}

.pg{
position:relative;
width:100%;
max-width:900px;
min-width: 225px;
background-color:#8a1734;
margin:0 auto;
min-height:600px;
margin-top:125px;
}

First, I used the "page" div as a page wrapper by setting a standard 900px width which you may adjust to your needs. I also set width to 100% which is very important for responsive designs, but also notice the max-width is set to 900px this is so your page won't go crazy-wide when you open a large browser window on a PC. If you want to always cover the width of the screen regardless, then you could remove this, but I recommend using a maximum width myself for most scenarios. Next I'll include a short description for each CSS declararation after "page" which I just explained:

  • header_menu_overlay - is used to position the overall navigation menu where you want. You'll see I decided to put it a hundred pixels from the top of the page, but you can put yours wherever you need it even at the bottom of the page for a footer menu if that's what you need. the header-menu-overlay div is the one that holds the image as well as the rest of navigation divs. Be sure to set the width only of the image in this div and set that width to 100% so it is responsive.
  • navwrap - is the div that wraps the other divs we will use for our links. we set it's position to relative and top to a negative number to force it on top of the image above it.
  • nav_item_wrap - wraps around the individual menu items and has a margin of "0 auto" so it centers the group of menu items to the rest of the page nicely.
  • nav_item - this class is set to all of the navigation item divs and is used to set their height, display and to float them left which is important for responsiveness.
  • nav_item a - is a style definition for the anchor/link tags inside of the nav_item div. Without this the links will not work. It sets the width and height to 100% of the containing element. You have to set "position: relative", width and height for this to work.
  • nav1 - nav6 - the next six CSS declarations are used to set each individual menu item's width and margin-left properties since they can all be different.

Add CSS Classes & Content to HTML:

Okay now we just need to add the classes above in the proper spots in our original HTML code and add some content for each page so that your new HTML page  looks like this:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="page">
<div id="header_menu_overlay">
<img src="topnav0map.png" style="width:100%;"  border="0" alt="top navigation menu"/>
<div class="navwrap">
<div class="nav_item_wrap">
<div class="nav_item nav1"><a href="#pg1"></a></div>
<div class="nav_item nav2"><a href="#pg2"></a></div>
<div class="nav_item nav3"><a href="#pg3"></a></div>
<div class="nav_item nav4"><a href="#pg4"></a></div>
<div class="nav_item nav5"><a href="#pg5"></a></div>
<div class="nav_item nav6"><a href="#pg6"></a></div>
</div>
</div>
</div>

<div class="pg"><a name="pg1">page 1</a>
<h1>Place all of your page 1 content here...</h1>
</div>

<div class="pg"><a name="pg2">page 2</a>
<h1>Place all of your page 2 content here...</h1>
</div>

<div class="pg"><a name="pg3">page 3</a>
<h1>Place all of your page 3 content here...</h1>
</div>

<div class="pg"><a name="pg4">page 4</a>
<h1>Place all of your page 4 content here...</h1>
</div>

<div class="pg"><a name="pg5">page 5</a>
<h1>Place all of your page 5 content here...</h1>
</div>

<div class="pg"><a name="pg6">page 6</a>
<h1>Place all of your page 6 content here...</h1>
</div>
</div>
</body>
</html>

Now you should be done and you have a completely responsive website in no time at all! You should go back and remove the borders from the navigation menu's CSS as those were just for demonstration.

Summary

So if you followed this tutorial, you should have learned quite a bit about responsive design. Not only should you be able to grasp how to develop a navigation menu from this article, but you should now be able to understand how to replace an inline image map with responsive divs and even how to make an entire responsive website using the techniques demonstrated here. Remember to use percentages instead of pixels for widths and even heights wherever you can and your design will be responsive and evenly laid out for all devices. Congratulations, you are now a responsive developer if you understood all of this. Good Luck!

View outcome of tutorial here:

http://jafty.com/ResponsiveSite.html

 

 

2 thoughts on “Building a Responsive Navigation Menu

    1. Good Point, I also noticed I haven't finished the code. Sorry about that. I just finished it though and added a link to the final product. Post has been updated. I hope that helps. Thanks for pointing it out to me:-) -Ian

Leave a Reply

Your email address will not be published. Required fields are marked *