Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

280 lines (237 sloc) 7.631 kb
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>CSS3 PIE Demo: Tabs</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$( function() {
var cb = $( '#togglePIE' );
if( !cb[0].addBehavior ) return; //IE only
function togglePIE() {
$( cb[0].getAttribute( 'data-target' ) ).each( function() {
if( cb.is(":checked") ) {
if( !this.behaviorId ) {
this.behaviorId = this.addBehavior( '../build/PIE.htc' );
}
}
else if( this.behaviorId ) {
this.removeBehavior( this.behaviorId );
this.behaviorId = null;
}
} );
}
cb.change( togglePIE );
togglePIE();
} );
</script>
<style type="text/css">
/* Page styles */
body {
font-size: 12px;
font-family: sans-serif;
}
section {
display: block;
}
.control, .demo {
border: 1px solid #CCC;
padding: 10px;
margin: 2em 0;
float: left;
width: 275px;
height: 250px;
}
.control {
margin-right: 1em;
}
.control .desc, .demo .desc {
height: 4em;
}
.code {
clear: both;
}
.code pre {
background: #EEE;
padding: 10px;
}
/* Demo styles */
.tabBox {
padding: 0 3px;
font-size: 12px;
font-family: sans-serif;
}
.tabBox .tabs {
margin: 0;
padding: 0 10px;
overflow: hidden;
margin-bottom: -1px;
}
.tabBox .tabs li {
float: left;
list-style: none;
margin: 0;
padding: 3px 3px 0;
overflow: hidden;
position: relative;
z-index: 1;
}
.tabBox .tabs li.selected {
z-index: 3;
}
.tabBox .tabs a {
float: left;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #EEE;
border: 1px solid #CCC;
padding: 4px 10px;
color: #000;
text-decoration: none;
/* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
}
.tabBox .tabs .selected a {
background: #FFF;
border-bottom-color: #FFF;
-webkit-box-shadow: #CCC 0 0 3px;
-moz-box-shadow: #CCC 0 0 3px;
box-shadow: #CCC 0 0 3px;
}
.tabBox .tabs a:hover {
background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
background: -moz-linear-gradient(#EEF, #FFF 70%);
-pie-background: linear-gradient(#EEF, #FFF 70%);
}
.tabBox .content {
clear: left;
position: relative;
z-index: 2;
padding: 2em 1em;
border: 1px solid #CCC;
background: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #CCC 0 0 3px;
-moz-box-shadow: #CCC 0 0 3px;
box-shadow: #CCC 0 0 3px;
/* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
}
.tabBox .content p {
margin: 0;
}
</style>
</head>
<body>
<h1>CSS3 PIE Demo: Tabs</h1>
<section class="explain">
<h2>Explanation</h2>
<p>This example demonstrates a common tabbed interface, styled only with CSS3 (no images are used). It uses
<code>border-radius</code> to give the tabs rounded corners. Also, <code>box-shadow</code> is used to give the
active tab and the content container a subtle drop shadow, which creates a sense of depth and makes the inactive
tabs look like they are sliding behind the content box. The tabs have a hover effect using a linear gradient.</p>
</section>
<section class="control">
<h2>Screenshot</h2>
<p class="desc">This is a screenshot of the intended rendering, captured in Firefox.</p>
<img src="tabs-control.png" alt="Rendering in Firefox" />
</section>
<section class="demo">
<h2>Live Demo</h2>
<p class="desc">This is the live code as rendered by your browser. If you use IE, you can toggle the PIE behavior on and off.</p>
<div class="tabBox">
<ul class="tabs">
<li class="selected"><a href="#">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
</ul>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<!--[if lt IE 9]>
<p>
<input type="checkbox" id="togglePIE" checked="checked" data-target=".demo .tabs a, .demo .content" />
<label for="togglePIE">Toggle PIE behavior</label>
</p>
<![endif]-->
</section>
<section class="code">
<h2>Code</h2>
<div class="html">
<h3>HTML markup</h3>
<pre><code>&lt;div class="tabBox">
&lt;ul class="tabs">
&lt;li class="selected">&lt;a href="#">Tab One&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">Tab Two&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">Tab Three&lt;/a>&lt;/li>
&lt;/ul>
&lt;div class="content">
&lt;p>Lorem ipsum dolor sit amet&lt;/p>
&lt;/div>
&lt;/div></code></pre>
</div>
<div class="css">
<h3>CSS</h3>
<pre><code>.tabBox .tabs {
margin: 0;
padding: 0 10px;
overflow: hidden;
margin-bottom: -1px;
}
.tabBox .tabs li {
float: left;
list-style: none;
margin: 0;
padding: 3px 3px 0;
overflow: hidden;
position: relative;
z-index: 1;
}
.tabBox .tabs li.selected {
z-index: 3;
}
.tabBox .tabs a {
float: left;
background: #EEE;
border: 1px solid #CCC;
padding: 4px 10px;
color: #000;
text-decoration: none;
behavior: url(PIE.htc);
}
.tabBox .tabs .selected a {
background: #FFF;
border-bottom-color: #FFF;
-webkit-box-shadow: #CCC 0 0 3px;
-moz-box-shadow: #CCC 0 0 3px;
box-shadow: #CCC 0 0 3px;
}
.tabBox .tabs a:hover {
background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
background: -moz-linear-gradient(#EEF, #FFF 70%);
-pie-background: linear-gradient(#EEF, #FFF 70%);
}
.tabBox .content {
clear: left;
position: relative;
z-index: 2;
padding: 2em 1em;
border: 1px solid #CCC;
background: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #CCC 0 0 3px;
-moz-box-shadow: #CCC 0 0 3px;
box-shadow: #CCC 0 0 3px;
behavior: url(PIE.htc);
}</code></pre>
</div>
</section>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.