Created
December 21, 2011 18:48
-
-
Save chriscoyier/1507168 to your computer and use it in GitHub Desktop.
Click open/close Dropdown in pure CSS
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
/* Click open/close Dropdown in pure CSS */ | |
.tabs { | |
position: relative; | |
clear: both; | |
margin: 50px; | |
} | |
.tab { | |
float: left; | |
position: relative; | |
} | |
.tab label { | |
background: -webkit-linear-gradient(#eee, #ccc); | |
padding: 10px 30px; | |
cursor: pointer; | |
text-align: center; | |
display: block; | |
position: relative; | |
} | |
.tab label i { | |
font-style: normal; | |
font-size: 10px; | |
color: #aaa; | |
} | |
.tab [type=radio] { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
opacity: 0; | |
margin: 0; | |
} | |
.content { | |
position: absolute; | |
top: 100%; | |
opacity: 0; | |
left: 0; | |
background: #333; | |
color: white; | |
padding: 20px; | |
} | |
[type=radio]:checked ~ label { | |
z-index: 2; | |
} | |
[type=radio]:checked ~ label ~ .content { | |
z-index: 1; | |
opacity: 1; | |
} | |
.close-tab { | |
position: absolute; | |
z-index: -1; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
.close-tab label { | |
background: #333; | |
color: white; | |
} | |
[type=radio]:checked ~ label ~ .close-tab { | |
z-index: 3; | |
} |
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
<div class="tabs"> | |
<div class="tab"> | |
<input type="radio" id="tab-1" name="tab-group-1"> | |
<label for="tab-1">List 1 <i>▼</i></label> | |
<div class="tab close-tab"> | |
<input type="radio" id="tab-close" name="tab-group-1"> | |
<label for="tab-close">List 1 <i>▲</i></label> | |
</div> | |
<div class="content"> | |
Experemental dropdowns - adding "drop down" and a close button to the "pure CSS tabs" by Chris Coyier - <ahref="http://css-tricks.com/13758-functional-css-tabs-revisited/">http://css-tricks.com/13758-functional-css-tabs-revisited/</a> | |
</div> | |
</div> | |
<div class="tab"> | |
<input type="radio" id="tab-2" name="tab-group-1"> | |
<label for="tab-2">List 2 <i>▼</i></label> | |
<div class="tab close-tab"> | |
<input type="radio" id="tab-close" name="tab-group-1"> | |
<label for="tab-close">List 2 <i>▲</i></label> | |
</div> | |
<div class="content"> | |
Uses a second radio button within the tab which is grizzly I know but makes it collapsible. | |
</div> | |
</div> | |
<div class="tab"> | |
<input type="radio" id="tab-3" name="tab-group-1"> | |
<label for="tab-3">List 3 <i>▼</i></label> | |
<div class="tab close-tab"> | |
<input type="radio" id="tab-close" name="tab-group-1"> | |
<label for="tab-close">List 3 <i>▲</i></label> | |
</div> | |
<div class="content"> | |
Got really excited about getting this working, but sadly IOS crushed the JS free dream :( | |
</div> | |
</div> | |
</div> |
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
{"view":"split-vertical","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment