CSS Tips & Tutorials
1. Gold Style Horizontal Navigation Menu
Simple mouse-over effect using background images:
/* NAVIGATION CSS */
#nav {
border-bottom: 1px solid #715709;
border-top: 1px solid #715709;
border-right: 1px solid #715709;
position: relative;
margin: 0px;
padding: 0px;
float: left;
clear: both;
}
#nav a {
margin: 0px;
padding: 0.5em 1em;
background: url(images/bkg-tab-off.gif) no-repeat 0px 0px;
vertical-align: 50%;
white-space: nowrap;
color: #241B00;
font-size: 1em;
text-decoration: none;
display: table-cell;
}
#nav a:link, #nav a:visited {
background-image: url(images/bkg-tab-off.gif);
color: #241B00;
}
#nav a:hover, #nav a:active {
background-image: url(images/bkg-tab-on.gif);
color: #2D2303;
}
<!-- NAVIGATION -->
<div id="nav">
<a href="index.php">Home</a>
<a href="about.php">About</a>
<a href="contact.php">Contact</a>
</div>
Zoom in screenshot of the Gold Style Horizontal Navigation Menu
Downloads:
Download original source files (ZIP):
1. HTML file with CSS code
2. IMAGES
3. PSD - Photoshop file: background image
with layer effect - gradient very easy to modify.
Login
