Tab Menus

Developer
Izzy Skye
Size
3,180 Kb
Views
12,144
  1. Tab Menus Previews
  2. Tab Menus HTML Codes
  3. Tab Menus CSS Codes
  4. Tab Menus JS Codes

How do I make an tab menus?

This is a fully working version of my pure css tab navigation using radio buttons, with using jquery. What is a tab menus? How do you make a tab menus? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Tab Menus Previews
IQ Test

Tab Menus - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tab Menus</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tabbing"> <label> <input type="radio" name="menu-tab" id="tab-1" value="tab-1" class="display-none" data_tab_number="1" checked> <div class="tab">Tab 1</div> </label> <label> <input type="radio" name="menu-tab" id="tab-2" value="tab-2" class="display-none" data_tab_number="2"> <div class="tab">Tab 2</div> </label> <ol> <li class="tab-item"> <div class="tab-background"> <div class="overlay"> <div class="readMore"> <a href="/tab-1/"> Read more </a> <div class="arrow"> <div class="arrow-mask"></div> </div> </div> </div> </div> <div class="tab-text"> <div class="title"> <a href="/tab-1/"><h2>Title 1</h2></a> </div> <div class="meta"> <p>Author / Date</p> </div> </div> </li> <li class="tab-item"> <div class="tab-background"> <div class="overlay"> <div class="readMore"> <a href="/tab-2/"> Read more </a> <div class="arrow"> <div class="arrow-mask"></div> </div> </div> </div> </div> <div class="tab-text"> <div class="title"> <a href="/tab-2/"><h2>Title 2</h2></a> </div> <div class="meta"> <p>Author / Date</p> </div> </div> </li> </ol>
</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>

Tab Menus - Script Codes CSS Codes

* {box-sizing:border-box;transition:all 0.3s;-webkit-transition:all 0.3s;color:#1d1f20;font-family: 'Roboto', sans-serif;}
.display-none {display:none;}
body {margin:100px;background-color:#1d1f20;}
.tabbing {position:relative;float:left;width:100%;overflow:hidden;height:480px;}
.tabbing input[type="radio"]:checked ~ .tab {background-color:#E0346A;color:#EEE;}
.tabbing .tab {cursor:pointer;position:relative;float:left;padding:18px 0px;width:50%;background-color:rgba(255,255,255,0.7);text-align:center;border-bottom:2px solid #E0346A;}
.tabbing ol {list-style:none;padding:0;}
.tabbing .tab-item {position:absolute;top:80px;width:100%;}
.tabbing .tab-item > div {transition:all 0.6s;-webkit-transition:all 0.6s;}
.tabbing .tab-item:nth-child(1) > div {z-index:1;opacity:1;}
.tabbing .tab-item:not(:nth-child(1)) > div {z-index:0;opacity:0;}
.tabbing .tab-item:not(:nth-child(1)) > .tab-background,
.tabbing .tab-item:not(:nth-child(1)) > .tab-background > .overlay {transform:translateX(100%);-webkit-transform:translateX(100%);}
.tabbing .tab-item:not(:nth-child(1)) > .tab-text {transform:translateX(-100%);-webkit-transform:translateX(-100%);}
.tabbing .tab-item .tab-background {position:relative;float:left;width:100%;height:250px;background-image:url('http://img.pandawhale.com/87497-Nope-Badger-Im-Out-cGvV.gif');background-size:contain;overflow:hidden;}
.tabbing .tab-item .tab-background:hover .overlay {bottom:0;}
/* READ MORE RULES */
.tabbing .tab-item .overlay {position: absolute;bottom: -100%;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;}
.tabbing .tab-item .overlay .readMore > a {float: left;width: 100%;color:#EEE;text-decoration:none;}
.tabbing .tab-item .overlay:hover {background-color:rgba(224, 52, 106,0.7);}
.tabbing .tab-item .overlay:hover .arrow {cursor: pointer;border-color: transparent;border-width: 0;}
.tabbing .tab-item .overlay:hover .arrow .arrow-mask {left: -15px;top: -29px;}
/* ARROW RULES */
.tabbing .tab-item .overlay .arrow {border: 4px solid #DADADA;border-radius: 100%;width: 40px;height: 40px;position: absolute;right: 20px;bottom:9px;}
.tabbing .tab-item .overlay .arrow .arrow-mask {position: relative;top: -33px;left: -32px;border: 21px solid transparent;}
.tabbing .tab-item .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);}
.tabbing .tab-item .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);}
/* TEXT UNDERNEATH TAB CONTENT */
.tabbing .tab-item .tab-text,
.tabbing .tab-item .tab-text > .title,
.tabbing .tab-item .tab-text > .meta {position:relative;float:left;width:100%;}
.tabbing .tab-item .tab-text > .title > a > h2,
.tabbing .tab-item .tab-text > .meta > p {color:#EEE;}

Tab Menus - Script Codes JS Codes

(function(){ $('.tabbing input').change(function(){ var input = $(this); var tabNumber = input.attr("data_tab_number"); var tabBackground = '.tab-item:nth-child(' + tabNumber + ') > .tab-background'; var notTabBackground = '.tab-item:not(:nth-child(' + tabNumber + ')) > .tab-background'; var tabText = '.tab-item:nth-child(' + tabNumber + ') > .tab-text'; var notTabText = '.tab-item:not(:nth-child(' + tabNumber + ')) > .tab-text'; var tabOverlay = '.tab-item:nth-child(' + tabNumber + ') > .tab-background > .overlay'; var notTabOverlay = '.tab-item:not(:nth-child(' + tabNumber + ')) > .tab-background > .overlay'; var translate = 'translateX(100%)'; var reverseTranslate = 'translateX(-100%)'; var notTranslate = 'translateX(0px)'; $(tabBackground).css({ 'z-index':'1', 'opacity':'1', 'transform':notTranslate, '-webkit-transform':notTranslate }); $(notTabBackground).css({ 'z-index':'0', 'opacity':'0', 'transform':translate, '-webkit-transform':translate }); $(tabOverlay).css({ 'z-index':'1', 'opacity':'1', 'transform':notTranslate, '-webkit-transform':notTranslate }); $(notTabOverlay).css({ 'z-index':'0', 'opacity':'0', 'transform':translate, '-webkit-transform':translate }); $(tabText).css({ 'z-index':'1', 'opacity':'1', 'transform':notTranslate, '-webkit-transform':notTranslate }); $(notTabText).css({ 'z-index':'0', 'opacity':'0', 'transform':reverseTranslate, '-webkit-transform':reverseTranslate }); });
})();
Tab Menus - Script Codes
Tab Menus - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 3.5
Size 3,180 Kb
Views 12,144
Do you need developer help for Tab Menus?

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!

Izzy Skye (zephyr) Script Codes
Name
Material CSS Contact Popup
Pure CSS Loader
Pure CSS Wordpress Fancyboxes
Pure CSS Arrow Collection
Pure CSS Tab Navigation
Aperture Science style loading
Audio Player
Pure CSS Read More Arrow
Material Button Click Example Usage
Vanilla JS Pattern Locker
Create amazing blog posts with AI!

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!