Tabs mit Css
Den Code habe ich irgendwo mal gefunden und will ihn euch zeigen wie man viel Content auf einer Seite bekommt und mir Tabs trennen kann
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<html>
<head>
<style>
ul#tabs-list {
list-style: none;
text-align: center;
border-bottom: 1px solid #dfdfdf;
margin: 0;
padding: 0;
}
label.panel-label {
user-select: none;
display: block;
width: 100%;
color: #bdc3c7;
cursor: pointer;
background-color: #ecf0f1;
transition-property: background-color, color;
transition-duration: 200ms;
}
label.panel-label:hover {
color: #c0392b;
}
#panels {
background-color: white;
}
#panels .container {
margin: 0 auto;
width: 90%;
}
#panels section header label.panel-label {
padding: 12px 24px;
box-sizing: border-box;
}
#panels section main {
box-sizing: border-box;
max-height: 0;
opacity: 0;
transition: opacity 600ms;
overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-4-ctrl:checked ~ #panels #panel-4 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-5-ctrl:checked ~ #panels #panel-5 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
@media all and (max-width: 767px) {
#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {
max-height: 46px;
opacity: 1;
}
#nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {
max-height: 46px;
opacity: 1;
}
#nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {
max-height: 46px;
opacity: 1;
}
#nav-ctrl:checked ~ #tabs-list #li-for-panel-4 {
max-height: 46px;
opacity: 1;
}
#nav-ctrl:checked ~ #tabs-list #li-for-panel-5 {
max-height: 46px;
opacity: 1;
}
#open-nav-label {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
#nav-ctrl:checked ~ #tabs-list #open-nav-label {
display: none;
}
#close-nav-label {
display: block;
max-height: 0;
overflow-y: hidden;
background-color: #444444;
color: #ecf0f1;
padding: 0px;
transition: max-height 200ms;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
line-height: 22px;
letter-spacing: 1px;
}
#nav-ctrl:checked ~ #tabs-list #close-nav-label {
max-height: 36px;
opacity: 1;
padding: 12px 24px;
}
#tabs-list {
position: relative;
}
#tabs-list label.panel-label {
padding: 12px 0;
}
#tabs-list #li-for-panel-1 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-2 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-3 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-4 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-5 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
max-height: 46px;
opacity: 1;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #c0392b;
background-color: #c0392b;
color: white;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
max-height: 46px;
opacity: 1;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
color: #c0392b;
background-color: #c0392b;
color: white;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
max-height: 46px;
opacity: 1;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
color: #c0392b;
background-color: #c0392b;
color: white;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 {
max-height: 46px;
opacity: 1;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label {
background-color: white;
color: #c0392b;
background-color: #c0392b;
color: white;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 {
max-height: 46px;
opacity: 1;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label {
background-color: white;
color: #c0392b;
background-color: #c0392b;
color: white;
}
#panels .container {
width: 100%;
}
#panels section header {
display: block;
}
}
@media all and (min-width: 768px) {
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
pointer-events: none;
cursor: default;
transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {
border-right: 1px solid transparent;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
border-left: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #c0392b;
padding-top: 26px;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after {
height: 6px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
pointer-events: none;
cursor: default;
transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {
border-right: 1px solid transparent;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
border-left: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
color: #c0392b;
padding-top: 26px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after {
height: 6px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
pointer-events: none;
cursor: default;
transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last {
border-right: 1px solid transparent;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
border-left: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
color: #c0392b;
padding-top: 26px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after {
height: 6px;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 {
pointer-events: none;
cursor: default;
transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4.last {
border-right: 1px solid transparent;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 + li {
border-left: 1px solid #dfdfdf;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label {
background-color: white;
color: #c0392b;
padding-top: 26px;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label::after {
height: 6px;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 {
pointer-events: none;
cursor: default;
transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5.last {
border-right: 1px solid transparent;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 + li {
border-left: 1px solid #dfdfdf;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label {
background-color: white;
color: #c0392b;
padding-top: 26px;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label::after {
height: 6px;
}
ul#tabs-list {
text-align: center;
border-bottom: 1px solid #dfdfdf;
}
ul#tabs-list li {
display: inline-block;
text-align: center;
font-size: 0.875em;
width: 18%;
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
border-right: 1px solid #dfdfdf;
position: relative;
}
ul#tabs-list li:hover {
transition: none;
border-right: none;
}
ul#tabs-list li:hover.last {
border-right: 1px solid transparent;
}
ul#tabs-list li:hover + li {
border-left: 1px solid #dfdfdf;
}
ul#tabs-list li label.panel-label {
position: relative;
padding: 24px 0;
}
ul#tabs-list li label.panel-label::after {
content: "";
position: absolute;
width: 100%;
left: 0;
bottom: 100%;
background-color: #c0392b;
height: 0;
transition-property: height;
transition-duration: 200ms;
}
ul#tabs-list li label.panel-label:hover {
padding-top: 25px;
}
ul#tabs-list li label.panel-label:hover::after {
height: 6px;
}
#open-nav-label,
#close-nav-label {
display: none;
}
#nav-ctrl {
display: none;
}
}
@media all and (min-width: 900px) {
main {
width: 70%;
margin: 0 auto;
}
}
.panel-radios {
position: fixed;
left: 50%;
top: 10px;
width: 20px;
opacity: 0.5;
z-index: 99;
}
.panel-radios:nth-child(1) {
transform: translateX(-50px);
}
.panel-radios:nth-child(2) {
transform: translateX(-30px);
}
.panel-radios:nth-child(3) {
transform: translateX(-10px);
}
.panel-radios:nth-child(4) {
transform: translateX(10px);
}
.panel-radios:nth-child(5) {
transform: translateX(30px);
}
.panel-radios:nth-child(6) {
top: 30px;
transform: translateX(-10px);
display: block;
}
body {
background: #e74c3c;
color: #444444;
font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}
#introduction {
width: 90%;
margin: 0 auto;
padding: 48px 24px;
color: white;
}
#introduction h1 {
font-weight: 300;
text-align: center;
}
label.demo-label {
background-color: #c0392b;
color: white;
padding: 4px 8px;
border-radius: 2px;
cursor: pointer;
display: inline-block;
user-select: none;
}
label.demo-label:hover {
background-color: #e74c3c;
}
#demo-child-toggle {
display: none;
}
#demo-child-toggle:checked ~ #demo-parent #demo-child {
color: #c0392b;
font-weight: bold;
text-transform: uppercase;
}
#demo-parent {
margin-top: 8px;
}
</style>
</head>
<body>
<input id="panel-1-ctrl"
class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl"
class="panel-radios" type="radio" name="tab-radios">
<input id="panel-3-ctrl"
class="panel-radios" type="radio" name="tab-radios">
<input id="panel-4-ctrl"
class="panel-radios" type="radio" name="tab-radios">
<input id="panel-5-ctrl"
class="panel-radios" type="radio" name="tab-radios">
<input id="nav-ctrl"
class="panel-radios" type="checkbox" name="nav-checkbox">
<header id="introduction">
<h1>No JS: Tabs That Scale Down to Menu</h1>
</header>
<ul id="tabs-list">
<label id="open-nav-label" for="nav-ctrl"></label>
<li id="li-for-panel-1">
<label class="panel-label"
for="panel-1-ctrl">Tab-1</label>
</li><!--INLINE-BLOCK FIX
--><li id="li-for-panel-2">
<label class="panel-label"
for="panel-2-ctrl">Tab-2</label>
</li><!--INLINE-BLOCK FIX
--><li id="li-for-panel-3">
<label class="panel-label"
for="panel-3-ctrl">Tab-3</label>
</li><!--INLINE-BLOCK FIX
--><li id="li-for-panel-4">
<label class="panel-label"
for="panel-4-ctrl">Tab-4</label>
</li><!--INLINE-BLOCK FIX
--><li id="li-for-panel-5" class="last">
<label class="panel-label"
for="panel-5-ctrl">Tab-5</label>
</li>
<label id="close-nav-label" for="nav-ctrl">Close</label>
</ul>
<article id="panels">
<div class="container">
<section id="panel-1">
<main>
inhalt-1
</main>
</section>
<section id="panel-2">
<main>
inhalt-2
</main>
</section>
<section id="panel-3">
<main>
inhalt-3
</main>
</section>
<section id="panel-4">
<main>
inhalt-4
</main>
</section>
<section id="panel-5">
<main>
inhalt-5
</main>
</section>
</div>
</article>
</body>
</html>