      
This tutorial will show you how to create a CSS navigation menu, using the Hover Pseudo Class. This is what the final result will look like:
At the end of this tutorial, we can substitute background images, rather than colors to make your nav unique. As we complete this tutorial, realize that Firefox, and Internet Explorer display PADDING in different ways. We will make this nav multi-browser compatible and this will be further explained as we start coding. � Overview: Create a Stylesheet Create a WebPage Add Button Styles Add buttons to the Web Page � Before you start this tutorial, create a folder on your desktop and name it CSS NAV. � Creating The Stylesheet All you need to create a stylesheet is Notepad. Open up Notepad and click SAVE AS. Make sure you are saving to your CSS NAV folder and you are saving this as ALL Files, rather then a text file (.txt). Name this file "style.css" and make sure the characters are all lowercase. � Creating the WebPage Open up another Notepad and type the following: <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="buttons"> <a href="#">Home</a> <a href="#">Contact</a> <a href="#">About Us</a> </div> </body> </html> The code above: the HTML tag states that we are using HTML markup the LINK tag links to our stylesheet the DIV tag is where our buttons will be the A HREF tags are the actual buttons, and their links. all of the tags with "/" are END tags � � We will discuss this a little later. Click SAVE AS and make sure you are once again in your CSS NAV folder, and that you are again saving as ALL files. Name this file "index.html" in all lowercase. � � � Creating The Button Styles Okay, so now that we have our two documents saved in the right place, we can actually make our menu. To do this, open up your "style.css" file. � In your document, type the following: #buttons {
width: 700px;
height: 35px;
background-color: black;
color: white;
font-family: verdana;
font-size: 12pt;
word-spacing: ;
}
#buttons a:link, #buttons a:visited {
display: inline-block;
width: auto;
height: 28px;
background-color: gray;
color: white;
padding: 7 15 0 15px;
font-family: verdana;
font-size: 12pt;
text-decoration: none;
margin-right: -.3em;
}
* html #buttons a:link, #buttons a:visited {
display: inline-block;
width: auto;
height: 35px;
background-color: gray;
color: white;
padding: 7 15 0 15px;
font-family: verdana;
font-size: 12pt;
text-decoration: none;
margin-right: -.3em;
}
#buttons a:hover {
display: inline-block;
width: auto;
height: 28px;
background-color: #ACACAC;
color: black;
padding: 7 15 0 15px;
font-family: verdana;
font-size: 12pt;
text-decoration: none;
margin-right: -.3em;
}
* html #buttons a:hover {
display: inline-block;
width: auto;
height: 35px;
background-color: #ACACAC;
color: black;
padding: 7 15 0 15px;
font-family: verdana;
font-size: 12pt;
text-decoration: none;
margin-right: -.3em;
}
� Ok, this is a big chunk of code, but I will explain it step by step. First of all, anything that starts with * html, is ust to fix it for Internet Explorer. The "#", in english, basically means a box. So, #buttons, will give us a box 700px wide, and 35 px tall, as is written in the code. The "#button a" stands for all of the links in our buttons box. The #button a:hover Is what your button will look like when you "hover" over it. The #button a:visited will keep the link exactly the same, even if you have visited it. (Visited: is like when you clock a link, and hit back and it changes from blue, to purple.) � There You Have It To change your button text, Replace the words like "Home" with whatever you want. To change your links, change the "#" in the HTML into the URL of where you want the button to navigate to. � To Use Unique Images... If you want your buttons to look spectacular, replace the "background-color: gray" in "#buttons a:link, #buttons a:visited" with "background-image: url(wherever your image is)". Then change the same thing in "#buttons a:hover" to "background-image: url(whatever your hover over image is)". � Here is an example:
� A great free graphics program if you do not have Photoshop is The Gimp. Google Search it to get it. 
Dig this tutorial?
Thank the author by sending him a few P2L credits!
kevinwcaulfield
This tutorial shows the user how to create a horizontal nav, with mouse over image/color change using css/link Pseudo classes. NO EXPERIENCE NECESSARY. 
|
