Horizontal Navigation in a Responsive Layout

If you’re working on a responsive layout website with navigation that contains too many links to display either horizontally or vertically on smaller screens, you may need to implement  a technique where only few links are visible by default and a drop-down is added for the rest of the links.

Once you go through the toughest exercise of deciding which links should be visible at all times, here is a way to execute the design.

HTML

Here is a pretty simple navigation using an unordered list and some anchor tags. Nothing special except an extra <li class=”show-more”> element that will be hidden on wide screens and class “hide” added to the  list items you will be hidden on smaller screens.

The <ul> element also has a helper class “clearfix” added to it, so our nav bar can take care of all the floats.

<ul class="nav clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li class="show-more"><a href="#">…</a></li>
    <li class="hide"><a href="#">Team</a></li>
    <li class="hide"><a href="#">About</a></li>
    <li class="hide"><a href="#">Contacts</a></li>
 </ul>

CSS

The CSS code is pretty basic as well. We have some default styles and some @media query styles for screens that are between 180px and 480px wide. Please refer the comments for a more details.

/* Clear floats helper classes
-------------------------------------*/
.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
	clear:both;
}
.clearfix { zoom: 1;clear: both;  }

/* Basic navigation styles
-------------------------------------*/
.nav {
	list-style:none;
	padding:0;
	margin:0;
	clear:both;
	background: #016196;
}
.nav li {
	float:left;
}
.nav li a{
	display:block;
	text-align:center;
	padding:10px 20px;
	color:#fff;
	border-right:1px solid #016196;
	border-left:1px solid #204f69;
	text-shadow:1px 1px 1px rgba(28,62,91,1);
	text-decoration:none;
	font-weight:bold;
	text-transform:uppercase;
	font-size:90%;
}
.nav li:first-child a {
	border-left:none;
}
.nav li a:hover{
	background-color: #204f69;
	color:#fff;
}

/* Hide show more link on wide screens
-------------------------------------*/
.show-more{
	display:none;
}

@media screen and (max-width: 480px) and (min-width: 179px) {
	.nav .show-more{
		display:block;  /* display drop-down link */
		float:right;	/* align it to the right */
	}

	/* hide the rest of the links and make them appear horizontally */
	.nav .hide{
		display:none;
		width:100%;
		clear:both;
		float:left;
	}
	/* re-arrange the borders and text orentation */
	.nav .hide a{
		text-align:left;
		border-bottom:1px solid #016196;
		border-top:1px solid #204f69;
	}
}

jQuery

Now that we have the HTML and the CSS in place, we need to add an event handler, so that the hidden links are displayed when the “show-more” link is clicked. And obviously the best tool for the job is jQuery, so don’t forget to include it  :)

$(".show-more a").click(function(){
	if($(".nav .hide").is(":visible")){
		//if navigation is visible, hide it and remove "style" element that was added to take care of any specificity issues
		$(".nav .hide").slideUp("fast", function(){$(this).removeAttr("style")});
	}else{
		//if navigation is hidden show it
		$(".nav .hide").slideDown("fast");
	}
	return false;
});

And finally here is the DEMO! 

Improvements

Obviously this is just a simple example to get you started on solving responsive layout navigation problem. There are improvements that you’ll have to work on to make it more robust. For example, as you’re resizing the DEMO window, you’ll notice that hiding of links could be more gradual. This can be easily solved by adding few more  classes to the list items, one or more @media queries and a little smarter javascript.

Download

Do you like this script? Support it by downloading a more robust version that includes some improvements listed above.

 

Related Posts:

  • No Related Posts