Creates rounded menus.
You will need the following four images:
- Right Tab
Left Tab
Right Tab Hover
Left Tab HoverCode
<html>
<style>
#navigation a
{
color: #000;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a span
{
background: url(right-tab.gif) right top no-repeat;
padding-right: 10px
}
#navigation a, #navigation a span
{
display: block;
float: left
}
/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */
#navigation a:hover
{
color: #fff;
background: #781351 url(left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}
#navigation a:hover span
{
background: url(right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0
}
#navigation li
{
list-style: none;
float: left;
margin: 0;
}
</style>
<body>
<h1>Tabbed Menu Test</h1>
<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>
</body>
</html>
0 comments:
Post a Comment