Menu
I was wondering if there is anyway to create scrolling tabs without using JavaScript. I've been assigned a task to strictly use HTML and CSS, that's it. The code below is the best solution I could find to create tabs without using anything else besides HTML and CSS. I've found some code for scrolling tabs online, but again it uses JavaScript. So, is it possible to do scrolling tabs with just HTML and CSS? Anything helps, thanks!
.tabs
{position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;}
.tab
{float: left;}
.tab label
{background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
cursor:pointer;
position: relative;
left: 1px; }
.tab [type=radio]
{display: none;}
.content {position: absolute;
top: 28px;
left: 0;
background: white;
height:100px;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;}
[type=radio]:checked ~ label
{background: white;
border-bottom: 1px solid white;
z-index: 2;}
[type=radio]:checked ~ label ~ .content
{z-index: 1;}<div class="tabs">
<div class="tab">
<input name="tab-group-1" id="tab-1" type="radio"/>
<label for="tab-1">Tab One</label>
<div class="content">
Content 1
</div>
</div>
<div class="tab">
<input name="tab-group-1" id="tab-2" type="radio"/>
<label for="tab-2">Tab Two</label>
<div class="content"> Content 2 </div>
</div>
</div>
937
This can be done by moving the labels into a separate div and using the focus hack to highlight the tabs. Here is a working JSFiddle.
<head>
<title>Test Page</title>
<style>
.wrapper
{
width:800px;
margin-left:auto;
margin-right:auto;
}
.tab-radio
{
display:none;
}
.tabs
{
font-size: 0;
margin: 0;
}
.labels
{
overflow-y: auto;
white-space: nowrap;
}
.labels .tab-label
{
background: #eee;
border: 1px solid #ccc;
display: inline-block;
font-size: 1rem;
left: 1px;
margin-left: -1px;
padding: 5px;
position: relative;
vertical-align: bottom;
}
.tabs .tab-panel
{
position: fixed;
display: inline-block;
overflow: hidden;
position: relative;
height: 0;
width: 0;
}
.tabs .tab-content
{
display: block;
float: left;
font-size: 1rem;
width: 100%;
white-space: normal;
}
span:focus
{
outline: none;
}
span:focus > .tab-label
{
background: white;
}
.tabs .tab [type="radio"]:checked ~ .tab-panel
{
display: inline;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="labels">
<span tabindex="0">
<label class="tab-label" for="tab-tab1">Tab Caption 1</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-0">Tab Caption 2</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-1">Tab Caption 3</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-2">Tab Caption 4</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-3">Tab Caption 5</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-4">Tab Caption 6</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-5">Tab Caption 7</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-6">Tab Caption 8</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-7">Tab Caption 9</label>
</span>
<span tabindex="0">
<label class="tab-label" for="tab-tab2-8">Tab Caption 10</label>
</span>
</div>
<div class="tabs">
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab1" name="tabs-main" checked>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 1</h2>
<p>A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text.</p>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-0" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 2</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-1" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 3</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-2" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 4</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-3" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 5</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-4" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 6</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-5" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 7</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-6" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 8</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-7" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 9</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-8" name="tabs-main">
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 10</h2>
</div>
</div>
</div>
</div>
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
