JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<p>Faking dropdown select, using input radio.</p>
<div class="dropp">
<div class="dropp-header">
<span class="dropp-header__title js-value">Choose an option</span>
<a href="#" class="dropp-header__btn js-dropp-action"><i class="icon"></i></a>
</div>
<div class="dropp-body">
<label for="optA">Option A<input type="radio" id="optA" name="dropp" value="Option A"/></label>
<label for="optB">Option B<input type="radio" id="optB" name="dropp" value="Option B"/></label>
<label for="optC">Option C<input type="radio" id="optC" name="dropp" value="Option C"/></label>
<label for="optD">Option D<input type="radio" id="optD" name="dropp" value="Option D"/></label>
</div>
</div>
<p>Update: See <a href="https://codepen.io/syndicatefx/pen/LVEbNR" target="_blank">version 2</a></p>
@import bourbon
@import url(https://fonts.googleapis.com/css?family=Varela+Round)
html
box-sizing: border-box
*, *:before, *:after
box-sizing: inherit
html
background: #181818
overflow-y: scroll
body
font: 1em/1.6 "Varela Round", Arial, sans-serif
color: #999
font-weight: 400
max-width: 25em
padding: 1em
margin: 10% auto
.icon
display: block
position: relative
width: 1.5em
height: 1.5em
margin: 0 auto
&:before,&:after
content: ""
position: absolute
// Dropp styles
$bgColor: #242424
$trimColor: #dd4040
$textColor: #fff
.dropp
width: 100%
box-shadow: 0 1px 3px darken($bgColor,10)
.dropp-header
background: $bgColor
color: $textColor
border-bottom: 2px solid $trimColor
+align-items(stretch)
+display(flex)
+flex-direction(row)
+justify-content(flex-start)
.dropp-header__title
display: block
padding: .8em .5em
+flex(8)
+ellipsis(100%)
.dropp-header__btn
display: block
background: darken($bgColor,3)
color: $textColor
padding: .8em .5em
+flex(1)
+transition(all .3s ease-in-out)
.icon
+transform(rotate(-90deg))
&:before,&:after
top: 30%
left: 25%
width: 50%
height: 15%
background: $trimColor
+transform(rotate(-45deg))
&:after
top: 55%
+transform(rotate(45deg))
&.js-open
background: $trimColor
.icon
+transform(rotate(90deg))
&:before,&:after
background: $textColor
&:focus
outline: none
.dropp-body
overflow: hidden
width: 100%
max-height: 0
background: lighten($bgColor,2)
color: $textColor
+transition(all .3s ease-in-out)
&.js-open
max-height: 20em
label
display: block
font-size: .875em
color: $textColor
text-decoration: none
padding: 1em .5em
font-weight: 400
box-shadow: 0 -1px 0 darken($bgColor,5),inset 0 1px 0 lighten($bgColor,5)
cursor: pointer
&:first-child
box-shadow: none
&:hover,&.js-open
background: $trimColor
> input
display: none
$(document).ready(function() {
// Default dropdown action to show/hide dropdown content
$('.js-dropp-action').click(function(e) {
e.preventDefault();
$(this).toggleClass('js-open');
$(this).parent().next('.dropp-body').toggleClass('js-open');
});
// Using as fake input select dropdown
$('label').click(function() {
$(this).addClass('js-open').siblings().removeClass('js-open');
$('.dropp-body,.js-dropp-action').removeClass('js-open');
});
// get the value of checked input radio and display as dropp title
$('input[name="dropp"]').change(function() {
var value = $("input[name='dropp']:checked").val();
$('.js-value').text(value);
});
});
Also see: Tab Triggers