Junior Spellweaver
- Joined
- Nov 30, 2010
- Messages
- 141
- Reaction score
- 16
I have been looking around the web, and found there's quite a few people trying to find a code for a navigation that changes on hover etc. If you want to know what I mean, cick
The HTML part is done using a simple List like this:
That's the basic HTML code, but that alone will make your nav go vertical, and ugly. So you need some CSS to go with it.
If you would rather have a background-image instead of color, simply add this code to #nav li a:
and you also need to change this:
to this:
This code works for all browsers, and relatively simple to edit.
Thanks for reading, and I hope this helps you.
King Towel
You must be registered to see links
. This was done using simple HTML and CSS, no JavaScript or hard-coding.The HTML part is done using a simple List like this:
Code:
<ul id="nav">
<li><b><a href="index.php">Home</a></b></li>
<li><b><a href="bio.php">Biography</a></b></li>
<li><b><a href="web.php">Web Design</a></b></li>
<li><b><a href="writing.php">Writing</a></b></li>
<li><b><a href="cooking.php">Cooking</a></b></li>
<li><b><a href="music.php">Music</a></b></li>
<li><b><a href="gfx.php">GFX</a></b></li>
<li><b><a href="contact.php">Contact</a></b></li>
</ul>
That's the basic HTML code, but that alone will make your nav go vertical, and ugly. So you need some CSS to go with it.
Code:
#nav ul
{
margin: 0px;
padding: 0px;
}
#nav li
{
display: inline;
list-style-type: none;
}
#nav li a
{
padding: 5px;
}
#nav li a:hover
{
background-color: #2a9cd0;
}
Code:
background-image: url(path/to.img);
and you also need to change this:
Code:
#nav li a:hover
{
background-color: #2a9cd0;
}
to this:
Code:
#nav li a:hover
{
background-image: url(path/to-hover.img);
}
This code works for all browsers, and relatively simple to edit.
Thanks for reading, and I hope this helps you.
King Towel