<html5>
<head>
</head>
<style type="text/css">
/*
The first things you want to do are remove the default bullets and zero down the margin and
padding:
*/
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
}
/*
You can then start layering on the graphical styling. In this case, I’m giving my navigation menu a
light green background and a dark green border. I’m also going to set the width of my navigate list
in ems.
*/
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
width: 8em;
background-color: #8BD400;
border: 1px solid #486B02;
}
/*Rather than style the list items, styling the enclosed anchor links provides better cross-browser
compatibility. To create a button-like hit area, you simply set the display property of the anchors
to block. The anchor links will then expand to take up the available space, which in this case is
determined by the width of the list. You could set the width of the anchors explicitly, but I’ve found
setting the width of the parent list makes for more maintainable code. The last couple of rules are
just stylistic, setting the color of the link text and turning off the underlines.*/
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
}
/*
To create the beveled effect on the menu items, you need to set the top border to be lighter than
the background color and the bottom border slightly darker. At this point, you can also drop in a
background image to use as an icon.
hint:
Ideally, I would have set the positioning of my arrow to be 10 pixels from the
left-hand edge of the anchor. However, the CSS specification doesn’t allow the
mixing of units, so I’ve used a percentage instead. In reality, most browsers
accept mixed units, and I think this is one of several instances where the
specification is wrong;
*/
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
background: url(./img/arrow.gif) no-repeat 5% 50%;
padding: 0.3em 1em;
}
/*
With all the borders stacked one on top of the other, you’ll notice that the bottom border on the
final link doubles up with the bottom border on the list. In this instance, I’m going to take the
simple option and remove the bottom border from the list. However in situations where this isn’t
possible, the addition of a class on the first or last list item can allow you to remove the border
directly. In the future, you’ll also be able to use the :last-child pseudo class, but for the time
being, browser support is limited.
*/
ul.nav .last a {
border-bottom: 0;
}
/*
The list now looks like a stylish vertical navigation bar. To complete the effect, the last thing you
need to do is apply the :hover, :focus, and :selected states. To do this, simply change the
background and text colors. You could also experiment with changing the border colors to create
a depressed button type effect. These styles are applied to the anchor links when the user hovers
over them. They are also applied to any anchors that have a class of selected applied to their
parent list item.*/
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {
color: #E4FFD3;
background-color: #6DA203;
}
/*
This technique should now work in all the major browsers except IE 6 and below for Windows.
Unfortunately, IE6 inexplicably adds extra space above and below the list items. To fix this bug,
you need to set the display property on the list items to inline:
*/
ul.nav li {
display: inline: /* :KLUDGE: Removes large gaps in IE/Win */
}
/*And there you have it: a styled vertical nav bar, complete with rollovers.
*/
</style>
<body>
<ul class="nav">
<li><a href="home.htm">Home1</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li>
<li><a href="work.htm">Our Work</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
<h1>AHA</h1>
<div id="branding">AHA</div>
<img src="./img/corners.gif"></img>
</body>
</html5>
