How To Create A Responsive Navigation

One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages.

There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to do it in a second.

However, rather than applying an instant solution, in this post, we are going to walk you through onhow to build a simple navigation from the ground and using the CSS3 media queries and a littlejQuery to display it in a small screen size like the smartphones properly.

  • DEMO
  • DOWNLOAD SOURCE

So, let’s just get started.

HTML

First of all, let’s add the meta viewport inside the head tag. This meta viewport tag is required for our page to scale properly inside any screen size, particularly in the mobile viewport.

view plaincopy to clipboardprint?
  1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  

…and then add the following snippet as the navigation markup inside the body tag.

view plaincopy to clipboardprint?
  1. <nav class="clearfix">  
  2.     <ul class="clearfix">  
  3.         <li><a href="#">Home</a></li>  
  4.         <li><a href="#">How-to</a></li>  
  5.         <li><a href="#">Icons</a></li>  
  6.         <li><a href="#">Design</a></li>  
  7.         <li><a href="#">Web 2.0</a></li>  
  8.         <li><a href="#">Tools</a></li>    
  9.     </ul>  
  10.     <a href="#" id="pull">Menu</a>  
  11. </nav>  

As you can see above, we have six primary menu links and added one more link after them. This extra link will be used to pull the menu navigation when it is hidden in a small screen.

Further reading: Don’t forget the viewport meta tag.

Styles

In this section, we start styling the navigation. The style here is only decorative, you can pick any colors as you desire. But in this case, we (I personally) want the body to have a soft and creamy color.

view plaincopy to clipboardprint?
  1. body {  
  2.     background-color#ece8e5;  
  3. }  

The nav tag that define the navigation will have 100% full width of the browser window, while the ulwhere it contains our primary menu links will have 600px for the width.

view plaincopy to clipboardprint?
  1. nav {  
  2.     height40px;  
  3.     width: 100%;  
  4.     background#455868;  
  5.     font-size11pt;  
  6.     font-family'PT Sans'Arialsans-serif;  
  7.     font-weightbold;  
  8.     positionrelative;  
  9.     border-bottom2px solid #283744;  
  10. }  
  11. nav ul {  
  12.     padding: 0;  
  13.     margin: 0 auto;  
  14.     width600px;  
  15.     height40px;  
  16. }  

Then, we will float the menu links to the left, so they will be displayed horizontally side by side, but floating an element will also cause their parent collapse.

view plaincopy to clipboardprint?
  1. nav li {  
  2.     displayinline;  
  3.     floatleft;  
  4. }  

If you notice from the HTML markup above, we’ve already added clearfix in the class attribute for both the nav and ul to clear things around when we float the elements inside it using this CSS clearfix hack. So, let’s add the following style rules in the style sheet.

view plaincopy to clipboardprint?
  1. .clearfix:before,  
  2. .clearfix:after {  
  3.     content" ";  
  4.     display: table;  
  5. }  
  6. .clearfix:after {  
  7.     clearboth;  
  8. }  
  9. .clearfix {  
  10.     *zoom: 1;  
  11. }  

Since we have six menu links and we also have specified the container for 600px, each menu links will have 100px for the width.

view plaincopy to clipboardprint?
  1. nav a {  
  2.     color#fff;  
  3.     displayinline-block;  
  4.     width100px;  
  5.     text-aligncenter;  
  6.     text-decorationnone;  
  7.     line-height40px;  
  8.     text-shadow1px 1px 0px #283744;  
  9. }  

The menu links will be separated with 1px right border, except for the last one. Remember our previous post on box model, the menu’s width will be expanded for 1px making it 101px as the border addition, so here we change the box-sizing model to border-box in order to keep the menu remains 100px.

view plaincopy to clipboardprint?
  1. nav li a {  
  2.     border-right1px solid #576979;  
  3.     box-sizing:border-box;  
  4.     -moz-box-sizing:border-box;  
  5.     -webkit-box-sizing:border-box;  
  6. }  
  7. nav li:last-child a {  
  8.     border-right: 0;  
  9. }  

Next, the menu will have brighter color when it is in :hover or :active state.

view plaincopy to clipboardprint?
  1. nav a:hover, nav a:active {  
  2.     background-color#8c99a4;  
  3. }  

…and lastly, the extra link will be hidden (for the desktop screen).

view plaincopy to clipboardprint?
  1. nav a#pull {  
  2.     displaynone;  
  3. }         

At this point, we only styling the navigation and nothing will happen when we resize the browser window. So, let’s jump to the next step.

Further reading: CSS3 Box-sizing (Hongkiat.com)

Media Queries

The CSS3 media queries is used to define how the styles will shift in some certain breakpoints or specifically the device screen sizes.

Since our navigation is initially 600px fix-width, we will first define the styles when it is viewed in600px or lower screen size, so practically speaking, this is our first breakpoint.

In this screen size, each of two menu links will be displayed side by side, so the ul‘s width here will be 100% of the browser window while the menu links will have 50% for the width.

Comments