Responsive radio tabs

Developer
Orion Drummond
Size
4,508 Kb
Views
24,288
  1. Responsive radio tabs Previews
  2. Responsive radio tabs HTML Codes
  3. Responsive radio tabs CSS Codes
  4. Responsive radio tabs JS Codes

How do I make an responsive radio tabs?

What is a responsive radio tabs? How do you make a responsive radio tabs? This script and codes were developed by Orion Drummond on 22 August 2022, Monday.

Responsive radio tabs Previews
IQ Test

Responsive radio tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive radio tabs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ :root { background-color: gray;
}
:root body { font-family: 'Titillium Web', sans-serif; padding: 1ex 1em;
}
.tabs { background-color: #333; display: flex; flex-direction: column; overflow: hidden; max-width: 100%; margin: 2ex 0;
}
.tabs > input { position: fixed; top: 50%; right: 100%; z-index: -1;
}
.tabs nav { background-color: silver;
}
.tabs nav label { text-align: center; font-weight: 700; line-height: 1.5;
}
.tabs nav label:hover { background-color: #dbdbdb;
}
.tabs section { background-color: gray;
}
.tabs nav { display: flex;
}
.tabs nav label { flex: 1; padding: 1ex 1em;
}
.tabs nav label:last-of-type { flex: 0 auto;
}
.tabs section { overflow: hidden; max-width: 100%;
}
.tabs section { transition: 0.48s opacity; transform: translateZ(0);
}
.tabs nav label:last-of-type { display: none;
}
@media only screen and (max-width: 60em) { .tabs nav label { display: none; } .tabs nav label:last-of-type { display: block; }
}
.tabs input[type=radio]:last-of-type { display: none;
}
.tabs input[type=radio]:checked ~ section { position: absolute; visibility: hidden; opacity: 0;
}
@media only screen and (max-width: 60em) { .tabs input[type=radio]:last-of-type { display: block; } .tabs input[type=radio]:last-of-type:checked ~ nav { display: block; } .tabs input[type=radio]:last-of-type:checked ~ nav label { display: block; } .tabs input[type=radio]:last-of-type:checked ~ nav label:last-of-type { display: none; }
}
.tabs input:nth-of-type(1):checked ~ nav label:nth-child(1),
.tabs input:nth-of-type(1):focus ~ nav label:nth-child(1) { background-color: whitesmoke; display: block;
}
.tabs input:nth-of-type(1):checked ~ section:nth-of-type(1),
.tabs input:nth-of-type(1):focus ~ section:nth-of-type(1) { display: flex; visibility: visible; position: static; opacity: 1;
}
.tabs input:nth-of-type(1):focus ~ nav label:nth-child(1) { text-decoration: underline;
}
.tabs input:nth-of-type(2):checked ~ nav label:nth-child(2),
.tabs input:nth-of-type(2):focus ~ nav label:nth-child(2) { background-color: whitesmoke; display: block;
}
.tabs input:nth-of-type(2):checked ~ section:nth-of-type(2),
.tabs input:nth-of-type(2):focus ~ section:nth-of-type(2) { display: flex; visibility: visible; position: static; opacity: 1;
}
.tabs input:nth-of-type(2):focus ~ nav label:nth-child(2) { text-decoration: underline;
}
.tabs input:nth-of-type(3):checked ~ nav label:nth-child(3),
.tabs input:nth-of-type(3):focus ~ nav label:nth-child(3) { background-color: whitesmoke; display: block;
}
.tabs input:nth-of-type(3):checked ~ section:nth-of-type(3),
.tabs input:nth-of-type(3):focus ~ section:nth-of-type(3) { display: flex; visibility: visible; position: static; opacity: 1;
}
.tabs input:nth-of-type(3):focus ~ nav label:nth-child(3) { text-decoration: underline;
}
.tabs input:nth-of-type(4):checked ~ nav label:nth-child(4),
.tabs input:nth-of-type(4):focus ~ nav label:nth-child(4) { background-color: whitesmoke; display: block;
}
.tabs input:nth-of-type(4):checked ~ section:nth-of-type(4),
.tabs input:nth-of-type(4):focus ~ section:nth-of-type(4) { display: flex; visibility: visible; position: static; opacity: 1;
}
.tabs input:nth-of-type(4):focus ~ nav label:nth-child(4) { text-decoration: underline;
}
.cover { display: flex; flex: 1 auto;
}
.cover img { flex: 1 auto; display: block; object-fit: cover; max-width: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="#">Keyboard access</a>
<div class="tabs"> <input checked type="radio" name="tab--visible" value="1" id="option-1"/> <input type="radio" name="tab--visible" value="2" id="option-2"/> <input type="radio" name="tab--visible" value="3" id="option-3"/> <input type="radio" name="tab--visible" value="4" id="option-4"/> <input type="radio" name="tab--visible" value="0" id="option-5"/> <nav> <label for="option-1">Tabby 1</label> <label for="option-2">Tabby 2</label> <label for="option-3">Tabby 3</label> <label for="option-4">Tabby 4</label> <label for="option-5">…</label> </nav> <section class="cover"> <img src="//lh4.ggpht.com/_Qogq3ys5M8M/S9BVoj5lOGI/AAAAAAAAEm4/fcKv4gHW_NM/s640/491257851_e592d7ad71_b.jpg"/> </section> <section class="cover"> <img src="//lh5.ggpht.com/_Qogq3ys5M8M/S9BWBc67HVI/AAAAAAAAEno/w0DHbe-Ic9I/s640/491319979_507ff96eaa_b.jpg"/> </section> <section class="cover"> <img src="//lh4.ggpht.com/_Qogq3ys5M8M/S9BWLr-BdLI/AAAAAAAAEoA/mqTWUwjWRlY/s640/491384794_0e63cd79d6_b.jpg"/> </section> <section class="cover"> <img src="//lh5.ggpht.com/_Qogq3ys5M8M/S9BVngDu2xI/AAAAAAAAEmw/gfZb9jATEqA/s640/491252894_fe18a8115e_b.jpg"/> </section>
</div>
<a href="#">More keyboard access</a> <script src="js/index.js"></script>
</body>
</html>

Responsive radio tabs - Script Codes CSS Codes

:root { background-color: gray;
}
:root body { font-family: 'Titillium Web', sans-serif; padding: 1ex 1em;
}
.tabs { background-color: #333; display: flex; flex-direction: column; overflow: hidden; max-width: 100%; margin: 2ex 0;
}
.tabs > input { position: fixed; top: 50%; right: 100%; z-index: -1;
}
.tabs nav { background-color: silver;
}
.tabs nav label { text-align: center; font-weight: 700; line-height: 1.5;
}
.tabs nav label:hover { background-color: #dbdbdb;
}
.tabs section { background-color: gray;
}
.tabs nav { display: flex;
}
.tabs nav label { flex: 1; padding: 1ex 1em;
}
.tabs nav label:last-of-type { flex: 0 auto;
}
.tabs section { overflow: hidden; max-width: 100%;
}
.tabs section { transition: 0.48s opacity; transform: translateZ(0);
}
.tabs nav label:last-of-type { display: none;
}
@media only screen and (max-width: 60em) { .tabs nav label { display: none; } .tabs nav label:last-of-type { display: block; }
}
.tabs input[type=radio]:last-of-type { display: none;
}
.tabs input[type=radio]:checked ~ section { position: absolute; visibility: hidden; opacity: 0;
}
@media only screen and (max-width: 60em) { .tabs input[type=radio]:last-of-type { display: block; } .tabs input[type=radio]:last-of-type:checked ~ nav { display: block; } .tabs input[type=radio]:last-of-type:checked ~ nav label { display: block; } .tabs input[type=radio]:last-of-type:checked ~ nav label:last-of-type { display: none; }
}
.tabs input:nth-of-type(1):checked ~ nav label:nth-child(1),
.tabs input:nth-of-type(1):focus ~ nav label:nth-child(1) { background-color: whitesmoke; display: block;
}
.tabs input:nth-of-type(1):checked ~ section:nth-of-type(1),
.tabs input:nth-of-type(1):focus ~ section:nth-of-type(1) { display: flex; visibility: visible; position: static; opacity: 1;
}
.tabs input:nth-of-type(1):focus ~ nav label:nth-child(1) { text-decoration: underline;
}
.tabs input:nth-of-type(2):checked ~ nav label:nth-child(2),
.tabs input:nth-of-type(2):focus ~ nav label:nth-child(2) { background-color: whitesmoke; display: block;
}
.tabs input:nth-of-type(2):checked ~ section:nth-of-type(2),
.tabs input:nth-of-type(2):focus ~ section:nth-of-type(2) { display: flex; visibility: visible; position: static; opacity: 1;
}
.tabs input:nth-of-type(2):focus ~ nav label:nth-child(2) { text-decoration: underline;
}
.tabs input:nth-of-type(3):checked ~ nav label:nth-child(3),
.tabs input:nth-of-type(3):focus ~ nav label:nth-child(3) { background-color: whitesmoke; display: block;
}
.tabs input:nth-of-type(3):checked ~ section:nth-of-type(3),
.tabs input:nth-of-type(3):focus ~ section:nth-of-type(3) { display: flex; visibility: visible; position: static; opacity: 1;
}
.tabs input:nth-of-type(3):focus ~ nav label:nth-child(3) { text-decoration: underline;
}
.tabs input:nth-of-type(4):checked ~ nav label:nth-child(4),
.tabs input:nth-of-type(4):focus ~ nav label:nth-child(4) { background-color: whitesmoke; display: block;
}
.tabs input:nth-of-type(4):checked ~ section:nth-of-type(4),
.tabs input:nth-of-type(4):focus ~ section:nth-of-type(4) { display: flex; visibility: visible; position: static; opacity: 1;
}
.tabs input:nth-of-type(4):focus ~ nav label:nth-child(4) { text-decoration: underline;
}
.cover { display: flex; flex: 1 auto;
}
.cover img { flex: 1 auto; display: block; object-fit: cover; max-width: 100%;
}

Responsive radio tabs - Script Codes JS Codes

// CSS-only solution
Responsive radio tabs - Script Codes
Responsive radio tabs - Script Codes
Home Page Home
Developer Orion Drummond
Username tappily
Uploaded August 22, 2022
Rating 3
Size 4,508 Kb
Views 24,288
Do you need developer help for Responsive radio tabs?

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!

Orion Drummond (tappily) Script Codes
Name
Hash navigation pattern
Flex-wrapped columns
Conditional compiler test
Flex scrolling tbody
Reading Grid
A Pen by Orion Drummond
Warp scaffold
3d stacked preview
Image based blurry background
3rd try
Create amazing love letters 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!