OTallu

Simple Navigation Bar with HTML / CSS

In this tutorial i am going to show you how to Simple Navigation Bar with HTML / CSS. The easiest ways is to use a simple unordered list as your HTML structure and then style it using CSS. With the right styling you can even achieve some creative effects Let’s get right into the code and build a simple menu.

HTML code:

The structure of the menu is just an unordered list with links inside each of the list items.

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Nothing really exceptional to that list. You would naturally add real URLs to your web pages inside the href attribute. The only thing I added was a class of ‘nav’ just so we can refer to the menu later in css. The code as we have it now will look like:

The HTML only menu is certainly workable and I’ve used something as simple in sites before. What we’re after here is a little something more so let’s dress it up a little with some css.

Complete CSS code

The complete code for our simple menu is:

ul.nav {
	margin:0;
	padding:0;
	list-style:none;
	height:36px; line-height:36px;
	background:#0d7963; /* you can change the backgorund color here. */
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
ul.nav li {
	border-right:1px solid #189b80; /* you can change the border color matching to your background color */
	float:left;
}
ul.nav a {
	display:block;
	padding:0 28px;
	color:#ccece6;
	text-decoration:none;
}
ul.nav a:hover,
ul.nav li.current a {
	background:#086754;
}

Here is how it looks after applying css style.

If you’re beginner in css, I would recommend you to start learning CSS here