Let’s Learn to Build Responsive Navigation Menu in 40 Minutes
In today’s time making responsive websites have almost become a daily part of a developer’s life, as everyone want their sites to give optimum performance on all devices. However, one of the problematic parts in responsive design is to make a Responsive Navigation, and this is really a very crucial part of any website as it lets the users to navigate through all web pages of a site.
But don’t worry anymore as today with this tutorial we are going to learn building a responsive navigation menu in quick time. Though there are plenty of ways to create responsive navigation system as there are many jQuery plugins that makes it super easy.
However, we always advise against using any easy solution especially to beginners as they don’t help you learn the core of web development, and to ensure that you learn making a responsive navigation menu on your own, we have now come up with a detailed tutorial on building a simple yet responsive navigation from the scratch by using CSS3 media queries and a little pinch of jQuery to ensure it runs smoothly on all devices with small screen sizes like the smartphones.
So, let’s hit the ground zero now!
The HTML
In order to make our navigation menu work flawlessly we first need to add the ‘Meta Viewport’ inside the head tag. This Meta Viewport tag is essential in any responsive design you create to scale the webpage suitably inside any screen size, mainly in the mobile viewport.
|
1 |
Once you have added the meta viewport, add the following html codes for creating the navigation structure within the body tag.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <nav class="clearfix"> <ul class="clearfix"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> <a href="#" id="pull">Menu</a> </nav> </body> |
In this code, as you can easily notice, we have created6 primary navigation menu links along with an additional link after them, all inside the HTML5 ‘nav’ tag. We will use this additional link to pull the navigation menu when gets hidden when viewed in a device with small screen size.
The CSS
If you are aware of HTML & CSS, you may be well aware of what CSS is used for. However, to all our new readers who are beginner in web development, we like to tell them the CSS is used for styling web pages. Now within our CSS file, we will add style to our navigation. As it’s just a simple navigation menu, we won’t be doing anything fancy. Therefore, we have added some elegant colors to decorate our navigation menu. However, you are always free to select and use any of the colors you desire.
|
1 2 3 |
body { background-color: #ece8e5; } |
Here, the nav tag that defines our menu bar will use full width of the browser window, therefore, set it to as 100%, whereas, for the ul tag, that contains our primary menu links will have set its width to 700px.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
nav { height: 40px; width: 100%; background: #2f81c4; font-size: 12pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; position: relative; border-bottom: 2px solid #32568a; } nav ul { padding: 0; margin: 0 auto; width: 700px; height: 50px; } |
Now, to make our entire menu links come in one line, we have to make them float to the left, and set the display to inline. This will bring them all together laid horizontally side by side. However, here you must remember that floating an element also causes its parent to collapse.
|
1 2 3 4 |
nav li { display: inline; float: left; } |
If you might have noticed the HTML Markup thoroughly, you would have seen that for both the nav and ul tags, we have added the class with an attribute of clearfix. This comes handy to clear things around whenever we float elements inside it using the micro clearfix hack. So, now let’s add some more style rules in our CSS file.
|
1 2 3 4 5 6 7 8 9 10 11 |
.clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } |
As we have 6primary menu links in our navigation within a specified container bearing the maximum width of 700px, we now need to specify the width for each menu links. So let’s keep that width for all our links to100px.
|
1 2 3 4 5 6 7 8 9 |
nav a { color: #fff; display: inline-block; width: 100px; text-align: center; text-decoration: none; line-height: 40px; text-shadow: 1px 1px 0px #1865a3; } |
Now we need to separate our menu links with a 1px right border, except leaving the last one. Though adding this 1px right border will expand the width for each menu link by 1px, so here we need to change the box-sizing model to border-box, this will keep the menu links remain with a width of 100px.
|
1 2 3 4 5 6 7 8 9 |
nav li a { border-right: 2px solid #4e91cc; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav li:last-child a { border-right: 0; } |
After that, we now need to set the color for the :hover or :active state. This will help users to identify what link they are on.
|
1 2 3 |
nav a:hover, nav a:active { background-color: #3767ad; } |
Once it’s done, we now need to hide the additional link, from the desktop version, we made in our HTML. Do that by using the display to none property.
|
1 2 3 |
nav a#pull { display: none; } |
Till now, we have only set the style for our navigation, so you’ll get nothing to see by resizing the browser window. So, let’s now move on to the next step where we would be adding CSS3 Media Queries.
The Media Queries
In responsive design, it’s the CSS3 media queries that defines how the web design will shift at defined breakpoints, which are generally set as of the most often used devices’ screen sizes.
As our navigation menu has a fix-width of 700px , we need to define its style when it is viewed in 700px or lower screen size. Technically, this will become our first breakpoint.
In this screen size, the 6 primary menu links will be divided into three rows containing two menu links displayed side by side, therefore, the ul‘s width here will become 100% of the browser window, and for the menu links it will be 50% of the width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@media screen and (max-width: 700px) { nav { height: auto; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 50%; float: left; position: relative; } nav li a { border-bottom: 1px solid #32568a; border-right: 1px solid #32568a; } nav a { text-align: left; width: 100%; text-indent: 25px; } } |
Now moving ahead, we need to define how our navigation is to be displayed when it is viewed on a screen size of 480px or lower, and this will be our second breakpoint.
In this screen size, the additional link we created in HTML will become visible, therefore, we will also assign a “Menu” icon on its right-side by using the ‘:after pseudo-element’, whereas to save the menu from covering entire vertical space available on the screen, our primary menu links will be hidden.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@media only screen and (max-width: 480px) { nav { border-bottom: 0; } nav ul { display: none; height: auto; } nav a#pull { display: block; background-color: #907fad; width: 100%; position: relative; } nav a#pull:after { content:""; background: url('nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } } |
At last, when the screen size gets reduced to 320px or lower the navigation menu will be presented upright from top to bottom.
|
1 2 3 4 5 6 7 8 9 10 |
@media only screen and (max-width : 320px) { nav li { display: block; float: none; width: 100%; } nav li a { border-bottom: 1px solid #32568a; } } |
Great, now all is done! Almost! You can give it a try by resizing the browser window. Our navigation menu would now be able to adapt to the different screen sizes. Now let’s proceed ahead and integrate a pinch of jQuery to handle remaining things.
Showing The Menu with jQuery
Right now, the menu will still be concealed and can only be seen whenever it is required by clicking on the “Menu” link. And to achieve the effect, we will now use the jQuery slideToggle().
|
1 2 3 4 5 6 7 8 9 |
$(function() { var pull = $('#pull'); menu = $('nav ul'); menuHeight = menu.height(); $(pull).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); |
However, now when you increase your browser window’s size soon after viewing and hiding the menu on a smaller screen size, the menu will remain concealed, as the ‘display: none’ style produced by jQuery is still associated with the element.
Therefore, we now need to eliminate this style whenever the browser window gets resized, with this code;
|
1 2 3 4 5 6 7 |
$(window).resize(function(){ var w = $(window).width(); if(w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); |
Alright, that’s all we required to make a responsive navigation menu, you can now view your own navigation in any browser or smartphone. Additionally, we also suggest you to test it in a responsive design test tool, such as ipadpeek.com. This will help you view it in various width in one go.
If you liked our tutorial on building a responsive navigation, please share your feedback with us. Meanwhile, you can also subscribe to our blog or stay connected with us on our social networking profiles.
