Tutorial - How to make a simple navigation bar in CSS3

With CSS3 it is now very easy to make a simple navigation bar in simple steps. Navigation bar can be made without images too.

We will make a simple CSS3 navigation bar which will work in most web browsers.

Lets get started

Make a css file example style.css

Make a id topnav with following properties

#topnav
{
margin-top: 50px;
float: left;
height: 50px;
width: 1000px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Background: Blue;
}

This css code will be used in a div. The properties define a 1000 x 50 pixel box with blue background. You can change background color according to your need. The edges will be rounded to make it look sleek. Different properties are used for border radius to work in different browsers.

Unordered list properties

ul
{
list-style-type: none;

} 

This property tells not to use any style in list.

Properties for list elements

ul li{
display: inline;
height: 50px;
padding: 2px 15px 2px 5px;
}

These properties define that the list elements will be placed horizontally. Padding is done to make the space between text elements.

Properties for Anchor Tag

ul li a
{
	font-size: 20px;
	color: white;
	text-transform: uppercase;
	font-family: calibri;
        text-decoration: none;
	text-shadow: #000 ;
}

These properties are for Anchor tag in navigation bar. Font size is given size 20 pixel with white color. Text is transformed to uppercase. Use any font you like and use text decoration as none.

Change text color on mouse over

ul li a:hover
{
	color:silver;
}


Then save the CSS file and then create a html file.

Code for HTML page

<HTML>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="topnav"; class="red">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</div>
<!-- Other body content
-->
</body>
</html>


Now we have completed using navigation bar and it will look like this. Meta tag is used to make it work in Internet Explorer 9.

More by this Author

  • what to wear at an Indian wedding
    1

    To select dress for Indian marriage is Important task. There are several traditional Indian as well as western options. Everyone want to look good at this event so here are suggestive dresses for indian wedding.


Comments 1 comment

goldookies profile image

goldookies 4 years ago from California

Nice guide, lots of information and very thorough. A+

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working