Pure CSS Tab Navigation
How do I make an pure css tab navigation?
Using radio buttons to make a tab navigation in only css. What is a pure css tab navigation? How do you make a pure css tab navigation? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.
Pure CSS Tab Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Tab Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<h2 class="title-text">Click on either tab!</h2>
<div class="sidebar-tabs-menu-1"> <label for="sidebar-tabs-menu-1-tab-1" class="tab"> <input type="radio" name="sidebar-tabs-menu-1-tab" id="sidebar-tabs-menu-1-tab-1" value="sidebar-tabs-menu-1-recent" class="display-none" checked> <div class="title">Recent</div> <div class="reveal"> <div class="lay-frame"> <div class="underlay"> <h2>Hover me!</h2> </div> <div class="overlay"> <div class="readMore"> <a href="#"> Read more </a> <div class="arrow"> <div class="arrow-mask"></div> </div> </div> </div> </div> <div class="text-frame"> <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div> <div><p>Author / June 19, 2014</p></div> <div><div class="border-bottom"></div></div> </div> <div class="lay-frame"> <div class="underlay"> <h2>Hover me!</h2> </div> <div class="overlay"> <div class="readMore"> <a href="#"> Read more </a> <div class="arrow"> <div class="arrow-mask"></div> </div> </div> </div> </div> <div class="text-frame"> <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div> <div><p>Author / June 19, 2014</p></div> <div><div class="border-bottom"></div></div> </div> </div> </label> <label for="sidebar-tabs-menu-1-tab-2" class="tab"> <input type="radio" name="sidebar-tabs-menu-1-tab" id="sidebar-tabs-menu-1-tab-2" value="sidebar-tabs-menu-1-popular" class="display-none"> <div class="title not-first">Popular</div> <div class="reveal"> <div class="lay-frame"> <div class="underlay"> <h2>Hover me!</h2> </div> <div class="overlay"> <div class="readMore"> <a href="#"> Read more </a> <div class="arrow"> <div class="arrow-mask"></div> </div> </div> </div> </div> <div class="text-frame"> <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div> <div><p>Author / June 19, 2014</p></div> <div><div class="border-bottom"></div></div> </div> <div class="lay-frame"> <div class="underlay"> <h2>Hover me!</h2> </div> <div class="overlay"> <div class="readMore"> <a href="#"> Read more </a> <div class="arrow"> <div class="arrow-mask"></div> </div> </div> </div> </div> <div class="text-frame"> <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div> <div><p>Author / June 19, 2014</p></div> <div><div class="border-bottom"></div></div> </div> </div> </label>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Pure CSS Tab Navigation - Script Codes CSS Codes
/* GENERAL RULES (REQUIRED) */
* {box-sizing:border-box;transition:all 0.3s;-webkit-transition:all 0.3s;color:#1d1f20;font-family: 'Roboto', sans-serif;}
.display-none {display:none;}
/* GENERAL RULES (OPTIONAL) */
body {margin:0;background-color:#1d1f20;}
h2 {font-weight:300;}
.title-text {text-align:center;font-size:40px;color:#EEE;}
.sidebar-tabs-menu-1 {position:relative;margin:40px auto;width:275px;}
/* TAB RULES */
.sidebar-tabs-menu-1 .tab {position:relative;float:left;margin-bottom:-300%;}
.sidebar-tabs-menu-1 .tab .title {cursor:pointer;position:absolute;padding:18px 10px;background-color:#EEE;border-bottom:3px solid #E0346A;width:50%;z-index:1;text-align:center;}
.sidebar-tabs-menu-1 .tab .title.not-first {right:0;}
/* CHANGE TABS */
.sidebar-tabs-menu-1 input[type="radio"]:checked ~ .title {background-color:#E0346A;color:#EEE;}
.sidebar-tabs-menu-1 input[type="radio"]:checked ~ .reveal .lay-frame div {transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1;z-index:1;}
.sidebar-tabs-menu-1 input[type="radio"]:checked ~ .reveal .text-frame div {transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1;z-index:1;}
/* REVEALED RULES */
.sidebar-tabs-menu-1 .reveal {margin:58px 0 0 0;overflow:hidden;}
/* LAY RULES */
.sidebar-tabs-menu-1 .reveal .lay-frame {position:relative;float:left;cursor:pointer;overflow:hidden;margin-top:30px;margin-bottom:20px;width:100%;height:160px;}
.sidebar-tabs-menu-1 .reveal .lay-frame div {opacity:0;z-index:0;transform:translateX(200%);-webkit-transform:translateX(200%);}
.sidebar-tabs-menu-1 .reveal .underlay {position:relative;float:left;width:100%;height:100%;box-shadow:0 0 160px #444 inset;}
.sidebar-tabs-menu-1 .reveal .underlay h2 {text-align:center;color:#EEE;line-height:62px;}
.sidebar-tabs-menu-1 .reveal .overlay {position:relative;width:100%;height:100%;color:#EEE;background-color:rgba(0,0,0,0.35);z-index:1;top:100%;opacity:0;}
/* LAY HOVER RULES */
.sidebar-tabs-menu-1 .reveal .underlay:hover + .overlay {opacity:1;top:0;}
.sidebar-tabs-menu-1 .reveal .overlay:hover {opacity:1;top:0;}
/* READ MORE RULES */
.sidebar-tabs-menu-1 .reveal .overlay .readMore {position: absolute;bottom: 0;right: 0;padding: 14px 10px 15px;font-size: 22px;width: 100%;border-top: 1px solid #999;background-color: rgba(0,0,0,0.6);color: #fff;font-weight: 300;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore > a {float: left;width: 100%;color:#EEE;text-decoration:none;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover {background-color:rgba(224, 52, 106,0.7);}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover .arrow {cursor: pointer;border-color: transparent;border-width: 0;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover .arrow .arrow-mask {left: -15px;top: -29px;}
/* ARROW RULES */
.sidebar-tabs-menu-1 .reveal .overlay .arrow {border: 4px solid #DADADA;border-radius: 100%;width: 40px;height: 40px;position: absolute;right: 20px;bottom:9px;}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask {position: relative;top: -33px;left: -32px;border: 21px solid transparent;}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask:before {content: '';position: relative;float: left;top: 16px;left: 28px;width: 4px;height: 16px;background-color: #DADADA;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask:after {content: '';position: relative;float: left;top: 9px;left: 28px;width: 4px;height: 16px;background-color: #DADADA;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
/* UNDERTEXT RULES */
.sidebar-tabs-menu-1 .reveal .text-frame div {position:relative;float:left;width:100%;opacity:0;z-index:0;transform:translateX(-300%);-webkit-transform:translateX(-300%);}
.sidebar-tabs-menu-1 .reveal .text-frame h2 {cursor:pointer;margin-top:-8px;margin-bottom:-8px;line-height:0.9;}
.sidebar-tabs-menu-1 .reveal .text-frame h2 a {font-size:16px;font-weight:300;text-transform:uppercase;color:#E0346A;}
.sidebar-tabs-menu-1 .reveal .text-frame h2 a:hover {color:rgba(224, 52, 106,0.75);}
.sidebar-tabs-menu-1 .reveal .text-frame p {cursor:auto;color:#EEE;}
.sidebar-tabs-menu-1 .reveal .text-frame .border-bottom {border-bottom:1px solid #9a9a9a;}
Pure CSS Tab Navigation - Script Codes JS Codes
/**
*
* Go to https://codepen.io/zephyr/pen/agHqz
*
* If you want to see it working with jQuery and fully functional
*
*/
Developer | Izzy Skye |
Username | zephyr |
Uploaded | October 27, 2022 |
Rating | 4.5 |
Size | 3,259 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
JQuery Slider | 3,529 Kb |
Pure CSS Down Arrow | 1,724 Kb |
Pure CSS Menu Transition | 2,027 Kb |
Pure CSS Spinning Cube | 2,539 Kb |
Pure CSS Social Widget | 2,262 Kb |
Audio Player | 13,728 Kb |
Pure CSS Read More Arrow | 1,747 Kb |
Simple Pure CSS Loader | 2,028 Kb |
Pure CSS Wordpress Fancyboxes | 4,789 Kb |
Mobile Material Menu Style | 5,189 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Table Exercise | Fresco | 9,585 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Css3 slide | Nakome | 3,190 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!