Using CSS, It is possible to make pure CSS tabbed navigation with HTML radio hack and CSS3 selector.
A Pen by Nikul Lakhani on CodePen.
<div class="page-wrap"> | |
<h1> | |
Pure CSS Tab | |
</h1> | |
<ul class="tab-wrap"> | |
<li> | |
<input type="radio" id="tab-1" name="tab" checked /> | |
<label for="tab-1" class="label-1"> | |
Tab 1 | |
</label> | |
<article class="tab-content"> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam laboriosam voluptatem optio cupiditate aliquam culpa doloremque perspiciatis unde blanditiis repellendus consequuntur rerum accusamus, minus pariatur voluptatum assumenda ad adipisci esse! | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad reprehenderit, ducimus tempore quidem iste quisquam! Illum voluptatibus ad rerum possimus quisquam distinctio, quaerat quod beatae quas, soluta, vel esse consequatur! | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, illo itaque ratione tempore eius eos ab, aperiam, repellendus sequi, qui et. Nobis repellat, qui voluptate iste asperiores temporibus provident ex. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum laboriosam porro eum ea eos nihil a dolores corrupti libero, nobis, sequi voluptatum? Unde accusamus laborum ex reiciendis quibusdam aliquam repellat. | |
</p> | |
</article> | |
</li> | |
<li> | |
<input type="radio" id="tab-2" name="tab" /> | |
<label for="tab-2" class="label-2"> | |
Tab 2 | |
</label> | |
<article class="tab-content"> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, culpa molestias delectus incidunt cum sed impedit aperiam aspernatur aliquam eos. Provident velit minus quia ea amet. Reprehenderit, voluptatem, explicabo. Consequuntur. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis amet repellat, nam. Beatae consequatur ratione quas omnis similique, alias, doloremque quam soluta rem libero eum error nesciunt maxime iure deleniti! | |
</p> | |
<p> | |
Assumenda rerum dolorum sapiente, voluptatibus nobis dolore debitis autem sed eos inventore odio provident quae molestiae quibusdam voluptate dicta neque, quisquam necessitatibus, expedita aliquam earum alias corrupti! Maxime, quia deleniti! | |
</p> | |
<p> | |
Quidem sunt quae cumque laborum incidunt commodi nam impedit cupiditate molestiae quia, aperiam hic nobis ullam esse neque natus saepe provident excepturi sed, iusto similique fuga libero nisi quod mollitia. | |
</p> | |
<p> | |
Atque voluptas doloremque vel, reprehenderit molestiae modi corrupti assumenda vitae at totam accusamus a autem consectetur, expedita veniam ut sapiente distinctio aliquid eum rerum eos accusantium dolor voluptatibus. Consectetur, voluptate. | |
</p> | |
</article> | |
</li> | |
<li> | |
<input type="radio" id="tab-3" name="tab" /> | |
<label for="tab-3" class="label-3"> | |
Tab 3 | |
</label> | |
<article class="tab-content"> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, culpa molestias delectus incidunt cum sed impedit aperiam aspernatur aliquam eos. Provident velit minus quia ea amet. Reprehenderit, voluptatem, explicabo. Consequuntur. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde itaque consequatur sequi repellendus, ipsa quo neque. A eaque veritatis earum, aliquid dolorum itaque tempore, aliquam eum, culpa expedita doloremque nihil. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, sapiente. Doloremque quos eius consequuntur alias perspiciatis ratione deserunt soluta nulla sequi, nihil iste sint debitis ea, doloribus eos non. Eligendi? | |
</p> | |
</article> | |
</li> | |
</ul> | |
</div> |
Using CSS, It is possible to make pure CSS tabbed navigation with HTML radio hack and CSS3 selector.
A Pen by Nikul Lakhani on CodePen.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800); | |
*, *:after, *:before { | |
box-sizing: border-box; | |
} | |
body { | |
padding: 0; | |
margin: 0; | |
font-family: 'Open Sans', sans-serif; | |
background: #333; | |
} | |
.page-wrap { | |
width: 80%; | |
margin: 0 auto; | |
} | |
h1 { | |
font-size: 2rem; | |
font-weight: bold; | |
padding: 0; | |
margin: 20px 0; | |
color: #fff; | |
text-align: center; | |
} | |
p { | |
font-size: 1rem; | |
line-height: 1.5rem; | |
} | |
input[type="radio"] { | |
position: absolute; | |
top: -9999px; | |
left: -9999px; | |
} | |
.tab-wrap { | |
width: 100%; | |
float: none; | |
list-style: none; | |
position: relative; | |
margin: 0 auto; | |
padding: 0; | |
text-align: left; | |
} | |
.tab-wrap li { | |
float: left; | |
display: block; | |
} | |
.tab-wrap label { | |
position: relative; | |
display: inline-block; | |
padding: 1.5em 1.5em 1em; | |
color: inherit; | |
text-decoration: none; | |
margin: 0 10px 0 0px; | |
} | |
.label-1 { | |
z-index: 100; | |
} | |
.label-2 { | |
z-index: 90; | |
} | |
.label-3 { | |
z-index: 80; | |
} | |
.tab-wrap label:before { | |
content: ''; | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 10px; | |
left: 0; | |
z-index: -1; | |
border: .1em solid #aaa; | |
border-bottom: none; | |
border-radius: 10px 10px 0 0; | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); | |
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); | |
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); | |
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); | |
-webkit-transform: perspective(5px) rotateX(2deg); | |
transform: perspective(5px) rotateX(2deg); | |
-webkit-transform-origin: left; | |
-ms-transform-origin: left; | |
transform-origin: left; | |
} | |
.tab-wrap .tab-content { | |
z-index: 200; | |
display: none; | |
overflow: hidden; | |
width: 100%; | |
position: absolute; | |
top: 53px; | |
left: 0; | |
padding: 20px; | |
background: #fff; | |
border-radius: 3px; | |
border: .1em solid #aaa; | |
border-top: 0; | |
} | |
.tab-wrap [id^="tab"]:checked + label { | |
z-index: 200; | |
margin-bottom: -1px; | |
border-top-width: 1px; | |
} | |
.tab-wrap [id^="tab"]:checked + label:before { | |
background: #fff; | |
} | |
.tab-wrap [id^="tab"]:checked ~ .tab-content{ | |
display: block; | |
} |
Pure CSS3 Tabs