codescracker


css

CSS Navigation Bar



« Previous Tutorial Next Tutorial »


Demo Navigation Bar

You can style your navigation bar (list of links) vertically or horizontally in simple or interactive way using CSS.

CSS Navigation Bar Example

Let's look at the following example to make simple navigation bar. This example shows how to create simple navigation bar:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Navigation Bar Example</title>
</head>
<body>

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#articles">Articles</a></li>
	<li><a href="#forum">Forum</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Here is the sample output produced by the above CSS navigation bar example code:

css navigation bar

Here is the live demo output of the above simple navigation bar example code in CSS. This is simplest navigation bar using standard HTML:

Now, let's remove the list style type using the CSS list-style-type property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Navigation Bar Example</title>
	<style>
		ul { list-style-type:none; margin:0; padding:0; }
	</style>
</head>
<body>

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#articles">Articles</a></li>
	<li><a href="#forum">Forum</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Here is the sample output of the above CSS navigation bar example code after removing the list style type:

css navigation bar example

Here is the live demo output of the above CSS example code of navigation bar:

CSS Create Vertical Navigation Bar

Here is an example shows how to create vertical navigation bar using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Vertical Navigation Bar Example</title>
	<style>
		ul { list-style-type:none; margin:0; padding:0; }
		a { display:block; width:60px; background-color:red; color:white; }
	</style>
</head>
<body>

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#articles">Articles</a></li>
	<li><a href="#forum">Forum</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Below is the sample output of the above CSS vertical navigation bar example code. In the above example a background color is added to the links to show the link area:

css vertical navigation bar

Here is the live demo output of the above CSS vertical navigation bar example code:

CSS Create Interactive Vertical Navigation Bar

Now we are going to create a fully styled vertical navigation bar using CSS which looks interactive. Here is an example shows how to create fully styled vertical navigation bar:

<!doctype html>
<html>
<head>
	<title>CSS Create Interactive Vertical Navigation Bar Example</title>
	<style>
		.ul5 ul { list-style-type:none; margin:0; padding:0; }
		.ul5 a { display:block; width:90px; }
		.ul5 a:link,.ul5 a:visited { display:block; font-weight:bold; color:white;
				background-color:red; text-align:center; padding:4px;
				text-decoration:none; text-transform:uppercase; }
		.ul5 a:hover,.ul5 a:active { background-color:blue; }
	</style>
</head>
<body>

<div class="ul5">
	<ul>
		<li><a href="#home">Home</a></li>
		<li><a href="#articles">Articles</a></li>
		<li><a href="#forum">Forum</a></li>
		<li><a href="#contact">Contact</a></li>
		<li><a href="#about">About</a></li>
	</ul>
</div>

</body>
</html>

Here is the sample output of the above CSS interactive vertical navigation bar example code:

css create interactive navigation bar

Here is the live demo output produced by the above CSS interactive navigation bar example code:

CSS Create Horizontal Navigation Bar

There are the following two ways to create a horizontal navigation bar:

Both methods work fine, but if you want the links to be the same size, you have to use the floating method. Let's take a look on both, one by one.

CSS Create Inline List Items

Here is an example, shows how to create an inline list items using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Horizontal Navigation Bar Example</title>
	<style>
		ul { list-style-type:none; margin:0; padding:0; }
		li { display: inline; }
	</style>
</head>
<body>

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#articles">Articles</a></li>
	<li><a href="#forum">Forum</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Here is the sample output of the above CSS horizontal navigation bar example code using inline list items:

css horizontal navigation bar

Here is the live demo output of the above CSS example on creating horizontal navigation bar using inline list items:

CSS Floating List Items

As we have already seen that in the example above, the links have different widths.

For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements. Let's look at the following example that shows how to create horizontal navigation bar using floating list items:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Horizontal Navigation Bar Example</title>
	<style>
		ul { list-style-type:none; margin:0; padding:0; overflow:hidden; }
		li { float:left; }
		a { display:block; width:60px; background-color:red; color:white; }
	</style>
</head>
<body>

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#articles">Articles</a></li>
	<li><a href="#forum">Forum</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Below is the sample output of the above CSS creating horizontal navigation bar using floating list items:

css horizontal navigation bar example

Following is the live demo output of the above CSS horizontal navigation bar example code:

Note - If a !DOCTYPE is not specified, floating items can produce unexpected results.

Here, the overflow:hidden is added to the ul element to prevent li elements from going outside of the list.

Here, a background color is added to the links to show the link area. The whole link area is clickable, not just the text.

CSS Create Interactive Horizontal Navigation Bar

Now we are going to create a fully styled horizontal navigation bar that looks interactive. Here is an example shows how to create interactive horizontal navigation bar using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Interactive Horizontal Navigation Bar Example</title>
	<style>
		ul { list-style-type:none; margin:0; padding:0; overflow:hidden; }
		li { float:left; }
		a:link, a:visited { display:block; width:120px; font-weight:bold;
			color:white; background-color:red; text-align:center;
			padding:4px; text-decoration:none; text-transform:uppercase; }
		a:hover, a:active { background-color:blue; }
	</style>
</head>
<body>

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#articles">Articles</a></li>
	<li><a href="#forum">Forum</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Following is the sample output of the above CSS creating interactive horizontal navigation bar example code:

css create interactive horizontal navigation bar

Here is the live demo output of the above CSS example code on creating interactive horizontal navigation bar:


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test