Simple Navigations

Horizontal CSS3 navigations using unordered lists.

by allusis

HTML

<!-- change the following id tag to "home", "about", "gallery", "services", or "contact" to change the selected navigation item for all of the examples and then run the fiddle. On a real web page you would generally want to add this id to the body tag -->
<div id="about">
<!-- example begin -->
<h1>What makes these so cool?</h1>
<p>You will notice that each <code> a </code> tag for the navigation menu's has a class that matches the respective link. 
This with the help of the id on the body tag will make that link appear in its "selected" state while navigating to its page. 
This is very easy to modify to your liking, but if you would like to use it the way I have it currently, just add the id to your <code>body</code> tag.</p> 

<p>For example: if you are on the contact page set <code> body id="contact" </code></p>
<p style="margin-bottom:20px">Also, if you would want to use javascript or some other way of doing this you can just add <code> class="selected" </code> to any <code>a</code> tag</p>
    <p style="margin-bottom:40px">These were all written by <a href="http://gplus.to/allusis" target="_blank">+Tony Montemorano</a>. Feel free to use them for whatever you'd like but please give credit where it is due</p>

<!-- Example 01 Begin -->
<h2>Horizontal Tabbed Nav 01</h2>
<ul class="tab-nav01">
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="about">About</a></li>
  <li><a href="#" class="gallery">Gallery</a></li>
  <li><a href="#" class="services">Services</a></li>
  <li><a href="#" class="contact">Contact</a></li>
</ul>
<!-- Example 01 End -->

<!-- Example 02 Begin -->
<h2>Horizontal Tabbed Nav 02</h2>
<ul class="tab-nav02">
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="about">About</a></li>
  <li><a href="#" class="gallery">Gallery</a></li>
  <li><a href="#" class="services">Services</a></li>
  <li><a href="#" class="contact">Contact</a></li>
</ul>
<!-- Example 02 End -->

<!-- Example 03 Begin -->
<h2>Horizontal...

CSS

/* --- Google Web Fonts ----------------------------------------- */
@media screen {
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url('http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff') format('woff');
}
}
@media screen {
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
}

/* -------------------------------------------------------|
|  html5doctor.com Reset Stylesheet - v1.6.1              |
|  Author: Richard Clark - http://richclarkdesign.com     |
|  Twitter: @rich_clark                                   |
|--------------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px...