I am trying to create a unique layout for my website that reveals content using labelled radio buttons, without the use of scripts.
Instead of using <a href='#'>, I want to achieve a specific layout like the one shown in this example. When using the hash link method, pressing tabs leaves a hash at the end of the URL and causes issues when navigating back through the browser history.
How can I make the tab 'Logo' appear centered above 'Tab 1', 'Tab 2', and 'Tab 3'? Clicking on it should trigger the appearance of the first content box (tab 0) while maintaining the transitions and styles of the overlaying content boxes (<divs>). Any attempt I've made so far has disrupted the layout.
Thank you in advance!
html {
background-color: #444;
text-align: center;
width: 100%;
height: 100%;
}
body {
color: #fff;
font: 16px'Open Sans', Helvetica, sans-serif;
line-height: 26px;
}
.tabs input[type=radio] {
display:none;
}
.tabs {
padding: 0px;
}
.tabs li {
display: inline-block;
}
.tabs label {
color: #8C8C8C;
display: block;
padding: 10px 10px;
font-size: 18px;
font-weight: bold;
text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.65), 4px 0px 8px rgba(0, 0, 0, 0.65), -4px 0px 8px rgba(0, 0, 0, 0.65), 0px -4px 8px rgba(0, 0, 0, 0.65);
transition: all 0.55s ease;
cursor: pointer;
position: relative;
}
.tabs label:hover {
color: white;
text-shadow: 0px 4px 8px rgba(255, 255, 255, 0.65), 4px 0px 8px rgba(255, 255, 255, 0.65), -4px 0px 8px rgba(255, 255, 255, 0.65), 0px -4px 8px rgba(255, 255, 255, 0.65);
}
.tab-content {
z-index: 2;
opacity: 0;
left: 0;
width: 100%;
min-height: 400px;
padding: 15px;
position: absolute;
box-sizing: border-box;
background:linear-gradient(transparent, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55), transparent);
transition: all 0.8s ease;
}
[id^=tab]:checked + label {
text-shadow: 0px 4px 8px rgba(255, 255, 255, 0.65), 4px 0px 8px rgba(255, 255, 255, 0.65), -4px 0px 8px rgba(255, 255, 255, 0.65), 0px -4px 8px rgba(255, 255, 255, 0.65);
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
opacity: 1;
}
@-webkit-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.zero {
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
animation-delay: .2s;
}
.fade-in.one {
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
animation-delay: .6s;
}
.fade-in.two {
-webkit-animation-delay: .9s;
-moz-animation-delay: .9s;
animation-delay: .9s;
}
.fade-in.three {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab0" checked>
<label for="tab0" class="fade-in zero">Logo</label>
<div id="tab-content0" class="tab-content">
<p>Welcome to this page!</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab1">
<label for="tab1" class="fade-in one">Tab 1</label>
<div id="tab-content1" class="tab-content">
<p>Tab 1 contains images and links!</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2" class="fade-in two">Tab 2</label>
<div id="tab-content2" class="tab-content">
<p>Tab 2 contains more images and links!</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3" class="fade-in three">Tab 3</label>
<div id="tab-content3" class="tab-content">
<p>Tab 3 has even more images and links!</p>
</div>
</li>
</ul>