Networking, Programming and Graphics - Tutorials
ONLINEHOWTO.net Tutorials Category
Simple PHP, Development, PHP Programming lessnos
Home >> Development >> WEB Design >> CSS >>

How to make upper CSS Menu

Type: Code Networking, Programming and Graphics - Tutorials
Networking, Programming and Graphics - Tutorials
Level: Intermediate Networking, Programming and Graphics - Tutorials Networking, Programming and Graphics - Tutorials 
Networking, Programming and Graphics - Tutorials
Date: 2007-Sep-27
Networking, Programming and Graphics - Tutorials
Visited: 5768 times
Networking, Programming and Graphics - Tutorials
Rating: Networking, Programming and Graphics - Tutorials
Networking, Programming and Graphics - Tutorials
Author: Alex Tutorialized

In this tutorial you will learn how to make the upper menu with CSS, witch options can be changed easily.

We will start with the HTML code witch shows the menu:
Example:
How to make a horizontal navbar with CSS

<a href="http://demolution.net">Link 1</a> 
<a href="http://demolution.net">Link 2</a> 
<a href="http://demolution.net">Link 3</a>
<a href="http://demolution.net">Link 4</a>
It won't be a problem so lets surround our menu in DIV tag . You can use ID or you can also use "class".

In this Example I use ID:

<div id="nav"> 

<a href="http://demolution.net">Link 1</a> 
<a href="http://demolution.net">Link 2</a> 
<a href="http://demolution.net">Link 3</a>
<a href="http://demolution.net">Link 4</a>

</div>
That was everything you have to do with the HTML. Now it is time to process our menu in CSS
Put the following code in CSS file:

Example:

#nav { 
background-color: #D5D5D5; 
border: 1px solid #B8B8B8; 
padding-top: 8px; 
height: 21px; 
padding-left: 3px; 
} 
#nav a { 
border: 1px solid #B7B7B7; 
padding: 4px; 
background-color: #F3F3F3; 
color: #0077B4; 
font-weight: bold; 
text-decoration: none; 
font-family: Verdana, Sans-Serif; 
font-size: 12px; 
} 
#nav a:hover { 
color: #00A8FF; 
background-color: #ffffff; 
border: 1px solid #727272; 
border-bottom: 1px solid #ffffff; 
} 
Now i will explain how it works. We named the DIV in witch we surrounded our menu "nav".
Our next set from CSS tells the browser how to make links in our div. The links are copied on CSS as "a".
We will add a frame and a color for a background for our links. We can also change the font.
Our last set in CSS will tell the browser how to show our links when we go over them with the mouse. We will make the frame darker and will change the color of the font and the background.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
<head> 
<title>CSS Menu</title> 
<style type="text/css"> 
#nav { 
background-color: #D5D5D5; 
border: 1px solid #B8B8B8; 
padding-top: 8px; 
height: 21px; 
padding-left: 3px; 
} 
#nav a { 
border: 1px solid #B7B7B7; 
padding: 4px; 
background-color: #F3F3F3; 
color: #0077B4; 
font-weight: bold; 
text-decoration: none; 
font-family: Verdana, Sans-Serif; 
font-size: 12px; 
} 
#nav a:hover { 
color: #00A8FF; 
background-color: #ffffff; 
border: 1px solid #727272; 
border-bottom: 1px solid #ffffff; 
} 
</style> 
</head> 
<body> 

<div id="nav">
<a href="">Link</a> 
<a href="">Home</a> 
<a href="">Tutorials</a> 
<a href="">Nothing</a></div> 

</body> 
</html> 

Our CSS menu is ready ! Now you can change the colors to be suitable for your site and you can also change the settings.
For all lazy people out there here is the combined HTML and CSS code:
Example:

And that is all in this tutorial for How to make upper CSS Menu. I hope this tutorial is useful for you.

How to make a horizontal navbar with CSS

Rate this tutorial:                    
Post Comment
Need a specific tutorial? Do not hesitate and submit a request!
Your e-mail: