Creating a Horizontal Navigation Bar with Inline width

Previously we have seen how to create a vertical navigation bar. Now we’ll try to create a horizontal navigation bar with inline width (width decided by the content inside).

The horizontal navigation bar stacks list of items into side-by-side presentation of links. Let us see how to create them,

a) Arrange Navigation links with lists

<ul class="nav">
		<li><a href="home.html">Home</a></li>
		<li><a href="news.html">About Us</a></li>
		<li><a href="blog.html">What we do?</a></li>
		<li><a href="about.html">Blog</a></li>
</ul>

Image may be NSFW.
Clik here to view.

b) Removing bullets and link underlines

ul.nav { 	
list-style-type: none; 
} 

ul.nav a { 	
text-decoration: none; 
}

Image may be NSFW.
Clik here to view.

c) Clearing padding and margins

ul.nav { 	
list-style-type: none; 	
padding-left: 0; 	
margin-left: 0; 
} 

ul.nav a { 	
text-decoration: none; 
}

Image may be NSFW.
Clik here to view.

d) Make the list items inline

ul.nav li { 	
display: inline; 
}

Image may be NSFW.
Clik here to view.

e) Styling and positioning the navigation tabs

ul.nav a { 	
text-decoration: none; 	
border: 1px dashed #000; 	
border-bottom: none; 	
padding: 5px 15px 5px 15px; 	
margin-right: 5px; 	
background-color: #eaeaea; 	
color: #333; 
}

Image may be NSFW.
Clik here to view.

f) Positioning the navigation bar

ul.nav { 	
list-style-type: none; 	
padding-left: 0; 	
margin-left: 0; 	
padding-top: 6px; 	
padding-bottom: 5px; 	
border-bottom: 1px dashed #000; 
}

Image may be NSFW.
Clik here to view.

Because this is an inline horizontal navigation bar, the width of the navigation tab items vary according to the content inside. We’ll see how to make the width of these tabs equal in the next article.

The post Creating a Horizontal Navigation Bar with Inline width appeared first on Bricks of Web.