A Pen by takanorioki on CodePen.
Created
October 13, 2016 12:58
-
-
Save takanorip/52ff8c2b54cc37665ccd2aabd4e36ac2 to your computer and use it in GitHub Desktop.
Vjyjrx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- TAB CONTROLLERS --> | |
<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"> | |
<!-- TABS LIST --> | |
<ul id="tabs-list"> | |
<!-- MENU TOGGLE --> | |
<li id="li-for-panel-1"> | |
<label class="panel-label" for="panel-1-ctrl">Tab1</label> | |
</li><!--INLINE-BLOCK FIX--> | |
<li id="li-for-panel-2"> | |
<label class="panel-label" for="panel-2-ctrl">Tab2</label> | |
</li><!--INLINE-BLOCK FIX--> | |
<li id="li-for-panel-3"> | |
<label class="panel-label" for="panel-3-ctrl">Tab3</label> | |
</li><!--INLINE-BLOCK FIX--> | |
</ul> | |
<!-- THE PANELS --> | |
<article id="panels"> | |
<div class="container"> | |
<section id="panel-1"> | |
<main> | |
<p>Content1</p> | |
</main> | |
</section> | |
<section id="panel-2"> | |
<main> | |
<p>Content2</p> | |
</main> | |
</section> | |
<section id="panel-3"> | |
<main> | |
<p>Content3</p> | |
</main> | |
</section> | |
</div> | |
</article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
label.panel-label { | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
display: block; | |
width: 100%; | |
color: #bdc3c7; | |
cursor: pointer; | |
background-color: #ecf0f1; | |
-webkit-transition-property: background-color, color; | |
transition-property: background-color, color; | |
-webkit-transition-duration: 200ms; | |
transition-duration: 200ms; | |
} | |
label.panel-label:hover { | |
color: #003399; | |
} | |
#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; | |
-webkit-transition: opacity 600ms; | |
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-1-ctrl:checked ~ #tabs-list #li-for-panel-1 { | |
pointer-events: none; | |
cursor: default; | |
-webkit-transform: translate3d(0, 1px, 0); | |
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: #003399; | |
padding-top: 24px; | |
} | |
#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; | |
-webkit-transform: translate3d(0, 1px, 0); | |
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: #003399; | |
padding-top: 24px; | |
} | |
#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; | |
-webkit-transform: translate3d(0, 1px, 0); | |
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: #003399; | |
padding-top: 24px; | |
} | |
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after { | |
height: 6px; | |
} | |
ul#tabs-list { | |
display: flex; | |
list-style: none; | |
text-align: center; | |
border-bottom: 1px solid #dfdfdf; | |
margin: 0; | |
padding: 0; | |
} | |
ul#tabs-list li { | |
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 { | |
-webkit-transition: none; | |
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; | |
font-size: 0.875em; | |
} | |
ul#tabs-list li label.panel-label::after { | |
content: ""; | |
position: absolute; | |
width: 100%; | |
left: 0; | |
bottom: 100%; | |
background-color: #003399; | |
height: 0; | |
-webkit-transition-property: height; | |
transition-property: height; | |
-webkit-transition-duration: 200ms; | |
transition-duration: 200ms; | |
} | |
ul#tabs-list li label.panel-label:hover { | |
padding-top: 24px; | |
} | |
ul#tabs-list li label.panel-label:hover::after { | |
height: 6px; | |
} | |
main { | |
width: 70%; | |
margin: 0 auto; | |
} | |
.panel-radios { | |
display: none; | |
} | |
body { | |
background: #00bfff; | |
color: #444444; | |
} | |
main p { | |
line-height: 1.8; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment