| Below is an example
of a nicely designed menu system, based purely on CSS. On the left
hand side is the style sheet itself, you can simply type what you see
below left into notepad and save as 'nav.css' keeping it with the HTML
that it will effect. On the right hand side is the HTML that creates the page containing the menu system; again you can copy this into notepad and save it as 'page.htm'. Both files should exist in the same directory for this to work correctly. |
|||||||
 |
|||||||
|
Style Sheet - save as 'nav.css' |
HTML - save as 'page.htm' |
||||||
BODY {
color : Black;
background-color : White;
font-family : Arial, Helvetica;
font-size : x-small;
}
A {
color : #990000;
text-decoration : none;
}
A:HOVER {
color : #CC0033;
text-decoration : none;
}
.nav {
color : #990000;
text-decoration : none;
border : 1px solid White;
width : 100px;
}
.nav:hover {
color : #CC0033;
text-decoration : none;
border : 1px solid #CCCCCC;
width : 100px;
}
.thispage {
color : #666666;
border : 1px solid #CCCCCC;
width : 100px;
}
|
<html> <head> <title>CSS Navigation</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <p><a href="#" class="nav">Home page</a></p> <p class="thispage">You are here</p> <p><a href="#" class="nav">Contact me</a></p> </body> |
||||||
|
Below
is an example of how the Menu will appear !
|
|||||||
|
|
|||||||