Pure css based top tab menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- Unneeded but smart to have -->
<style type='text/css'>
/* CSS Document */
html,body {
background-color: #AFC4E2;
color: #234;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 100%;
text-align: center;
}
a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 90%;
color: #678;
text-decoration: none;
font-weight: bold;
background: inherit;
}
a:hover,a:active {
text-decoration: underline;
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 90%;
font-weight: normal;
color: #234;
background: inherit;
}
#container {
width: 760px;
height: auto;
background-color: #FFFFFF;
color: #234;
border: 2px solid #999;
padding: 10px;
margin: 20px auto;
text-align: right;
}
/* HEADER STYLES */
#header {
background-image: url(clouds.jpg);
background-repeat: no-repeat;
text-align: left;
height: auto;
padding: 5px;
margin: 5px;
}
#header h1 {
color: #345;
background: none;
padding: 0px;
line-height: 0px;
text-indent: 10px;
}
#header h2 {
color: #678;
background: none;
padding: 0px;
text-indent: 50px;
}
/* NAV STYLES */
#header #nav {
text-align: right;
background: none;
padding: 0px;
margin: 0px;
}
#header #nav ul {
padding: .4px;
margin: 0;
}
#header #nav ul li {
list-style: none;
display: inline;
padding: 0;
margin: 0;
}
#header #nav ul li a {
padding: 5px;
background-color: #0066CC;
color: #EFF;
text-decoration: none;
border-top: thin solid #012;
border-left: thin solid #012;
border-right: thin solid #012;
border-bottom: none;
}
#header #nav ul li a.selected {
background-color: #FFF;
color: #678;
border-bottom: #FFF thin solid;
}
#header #nav ul li a:hover,#header #nav ul li a:active {
background-color: #FFF;
color: #123;
border-bottom: #FFF thin solid;
}
/* FOOTER STYLES */
#footer {
clear: both;
padding: 5px;
margin: 5px;
background: #FFFFFF;
color: #999999;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
font-weight: normal;
text-align: center;
}
#footer p {
background: #FFFFFF;
color: #999999;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 90%;
text-align: center;
font-weight: normal;
}
#footer a {
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #333333;
background: inherit;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
/* CONTENT STYLES */
#content {
float: right;
padding: 5px;
margin: 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 97%;
font-weight: normal;
line-height: 1.5em;
color: #234;
background: inherit;
text-align: right !important;
width: 68%;
height: auto;
}
#content h3 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #548FBC;
background: inherit;
padding: 3px 5px 3px 0px;
margin: 3px 5px 3px 0px;
}
#content p {
text-align: right !important;
color: #234;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 97%;
background: inherit;
padding-right: 20px;
}
/* SIDEBAR STYLES */
#sideBar {
float: left;
text-align: left;
width: 28%;
border-right: none;
border-top: thin dotted #012;
border-bottom: thin dotted #012;
height: auto;
background-color: #EEE;
color: #234;
margin-top: 15px;
padding-top: 5px;
}
#sideBar h3 {
color: #71A8C6;
background: inherit;
font-size: 115%;
padding: 3px 0px 2px 3px;
margin: 3px 0px 2px 3px;
}
#sideBar p {
font-size: 80%;
color: #345;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: normal;
background: inherit;
padding: 1px 1px 1px 15px;
margin: 0px;
}
#sideBar h4 {
color: #30557A;
background: inherit;
font-size: 100%;
padding: 1px 0px 1px 1px;
margin: 1px 0px 1px 1px;
}
/* ALTERNAT SideBar Navigation
#sideBar #navigation{
padding:0px 0px 0px 0px;
margin:3px 0px 3px 0px;
background:none;
color:#012;
width:100%;
text-align:right !important;
}
#sideBar #navigation ul{
list-style:none;
display:block;
padding:0px;
margin:0px;
}
#sideBar #navigation ul li{
list-style:none;
display:block;
padding-top:9px;
padding-right:-1px;
padding-bottom:9px;
padding-left:0px;
}
#sideBar #navigation ul li a{
background-color:#CCCCCC;
padding:5px 5px 5px 5px;
margin:3px 0px 5px 3px;
border-bottom:thin solid #234;
border-top:thin solid #234;
border-left:thin solid #234;
border-right:none;
text-decoration:none;
color:#567;
}
#sideBar #navigation ul li a:hover,
#sideBar #navigation ul li a:active, */
/* MULTIPLE SIDEBAR HOVERS AND ACTIVES CAUSE SOME EXTRA SPACING HERE */
/*
#sideBar #navigation ul li a.current:hover,
#sideBar #navigation ul li a.current:active{
border-right:thin solid #FFF;
background:#FFF;
color:#012;
}
#sideBar #navigation ul li a.current{
background:#FFF;
border-right:thin solid #FFF;
color:#567;
}
*/
#sideBar #navigation {
width: 100%;
height: auto;
background: inherit;
color: inherit;
text-align: center;
}
#sideBar #navigation ul {
padding: 5px 0px 5px 40px;
margin: 0;
}
#sideBar #navigation ul li {
list-style: none;
display: block;
padding: 0px 0px 5px 0px;
margin: 0px 0px 5px 0px;
text-align: center;
border-bottom: thin solid #012;
width: 75%;
}
a.current {
color: #F60 !important;
background: none;
}
#sideBar #navigation ul li a {
width: 100%;
height: auto;
padding: 5px;
margin: 5px;
text-align: center;
background: #EEE;
color: #3D5676;
text-decoration: none;
}
#sideBar #navigation ul li:hover a:hover,#sideBar #navigation ul li:hover a:active
{
color: #F60;
background: inherit;
text-decoration: none;
}
/* MISC Styles */
#box {
border: thin dashed #001;
background-color: #FDFDFD;
color: #234;
height: auto;
width: 90%;
padding: 5px;
margin: 5px;
}
a.affiliate {
margin: 10px;
line-height: 2.5em !important;
padding: 3px 3px 3px 10px;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 75%;
}
a.affiliate:hover,a.affiliate:active {
color: #F60;
background: inherit;
}
</style>
<title>^ Mile High ^</title>
</head>
<body>
<div id="container" align="center"> <!-- BEGIN CONTAINER -->
<div id="header"> <!-- BEGIN HEADER -->
<h1>Website Name</h1> <!-- Big Website name or page name -->
<h2>-- Website Slogan Goes Here --</h2> <!-- Slogan or wuote of some sort? -->
<div id="nav"> <!-- BEGIN NAV TABS -->
<ul>
<li><a class="selected" href="#">Home</a></li> <!-- 'class="selected"' if you are on the page -->
<li><a href="#">Check</a></li>
<li><a href="#">Out My</a></li> <!-- MAIN TABBED MENU -->
<li><a href="#">Tabbed</a></li>
<li><a href="#">Menu!</a></li>
</ul>
</div> <!-- END NAV TABS -->
</div> <!-- END HEADER -->
<div id="content"> <!-- BEGIN MAIN CONTENT -->
<h3>Miles in the Sky</h3>
<p>Welcome to Mile High web design! This is my first venture with tab navigation and in many respects it is very similar to a previous design of mine. There are many extra styles included in the CSS and both the XHTML and the CSS have been annotated with lots of comments to make it easier to mess around with.</p>
<p>This design is made with all valid XHTML 1.0 Transitional and CSS 2. Mostly using ID's and styling the tags themselves. If you like this design, please check out my others at <a href="http://www.oswd.org">OSWD.</a></p>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In velit dui, molestie eu, pellentesque iaculis, rhoncus ac, leo. Etiam convallis, nisi sit amet imperdiet placerat, ante magna nonummy risus, at sodales eros pede ac mauris. Suspendisse potenti. Vestibulum ut mauris a ligula convallis varius. Quisque porta bibendum nunc. Pellentesque ullamcorper tellus ac erat. Integer massa leo, molestie vel, iaculis vestibulum, elementum in, purus. Quisque ultrices magna. Aliquam erat volutpat. Phasellus mattis sapien in libero. Sed vehicula tristique purus. Vivamus tristique felis quis quam. Etiam vel augue pellentesque neque facilisis viverra. Proin ut mauris.</p>
</div> <!-- END CONTENT -->
<div id="sideBar"> <!-- BEGIN SIDEBAR -->
<h3>Secondary Nav</h3>
<div id="navigation"> <!-- BEGIN SECONDARY NAVIGATION -->
<ul>
<li><a href="#">Extra</a></li>
<li><a href="#">sideBar</a></li>
<li><a href="#" class="current">Navigation</a></li> <!-- If currently on page, put class="current" on the li element -->
</ul>
</div> <!-- END EXTRA NAVIGATION -->
<h3>News</h3>
<div id="box">
<h4>1.21.06</h4>
<p>Here would be an excellent place to put the latest new or some links to a blog of some sort.</p>
</div> <!-- END OF BOX -->
<h3>Affiliates</h3>
<a class="affiliate" href="http://www.oswd.org">» OSWD «</a><br />
<a class="affiliate" href="#">» An Affiliate «</a><br />
<a class="affiliate" href="#">» Another «</a><br /><br />
<a class="affiliate" style="font-size:x-small;" href="http://validator.w3.org/check?uri=referer">XHTML</a> &
<a class="affiliate" style="font-size:x-small;" href="http://jigsaw.w3.org/css-validator/validator">CSS</a><br />
</div><!-- END SIDEBAR -->
<div id="footer"> <!-- BEGIN FOOTER -->
<p>© 2006 YourSite -- All Rights Reserved :.: Design V1.0 by <a href="http://24.15.71.248/">Jacob Tallman</a>
- <a href="http://www.ehostinfo.com/">Web Hosting</a></p>
</div> <!-- END FOOTER -->
</div> <!-- END CONTAINER -->
</body>
</html>
Related examples in the same category