Stylish Tabbed Navigation with jQuery and CSS3

A stylish, semantic, jQuery based tabbed navigation which allows you swap between content panels with smooth CSS3 powered transitions.

How to use it:

1. Create a group of navigation tabs with Html unordered list.

<ul class="tabs group">
  <li><a class="active" href="#/one">Tab 1</a></li>
  <li><a href="#/two">Tab 2</a></li>
  <li><a href="#/three">Tab 3</a></li>
</ul>

2. Create a group of tabbed panels with CSS IDs corresponding to the navigation tabs.

<div id="panels">
  <p id="one">Panel 1</p>
  <p id="two">Panel 2</p>
  <p id="three">Panel 3</p>
</div>

3. Add the following CSS snippets into your document to style the tabs control.

ul.tabs {
  width: 600px;
  height: 80px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  padding: 0;
}

ul.tabs li {
  float: left;
  width: 200px;
}

ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #1abc9c;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}

.tabs li:first-child a {
  z-index: 3;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
}

.tabs li:nth-child(2) a { z-index: 2; }

.tabs li:last-child a {
  z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}

ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}

ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #2c3e50;
  color: #D3FEF5;
  z-index: 4;
  outline: none;
}

.group:before,
.group:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.group:after { clear: both; }

#panels {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  background: #2c3e50;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

#panels p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #ffffff;
  line-height: 26px;
  font-size: 18px;
  margin: 0;
}

#one { }

#two { display: none; }

#three { display: none; }

4. Include the latest version of jQuery library at the end of your document.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

5. Enable the tabbed navigation.

(function($) {

  var tabs =  $(".tabs li a");
  
  tabs.click(function() {
    var panels = this.hash.replace('/','');
    tabs.removeClass("active");
    $(this).addClass("active");
    $("#panels").find('p').hide();
    $(panels).fadeIn(200);
  });

})(jQuery);

---

This awesome jQuery plugin is developed by BryanHu. For more Advanced Usages, please check the demo page or visit the official website.