<div class="container">
<svg version="1.1" class="close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px"
viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve">
<path class="path one" fill="#cbcbcb" d="M42,21L42,21c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2v0c0-1.1,0.9-2,2-2H40C41.1,19,42,19.9,42,21z" cx="0" cy="0" />
<path class="path two" fill="#cbcbcb" d="M21,42L21,42c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2h0c1.1,0,2,0.9,2,2V40C23,41.1,22.1,42,21,42z" cx="10" cy="10" />
</svg>
<span>Select a value</span>
<ul class="list">
<li><a href="#">A default value</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Just one more</a></li>
</ul>
</div>
@import compass
@import "compass/css3/shared"
*
font-family: "Helvetica Neue", Arial
color: #636363
+keyframes(colorFade)
from
color: #404040
to
color: #cbcbcb
.container
margin: 200px auto 0
width: 280px
border: 3px solid #cbcbcb
+border-radius(6px)
padding: 15px
overflow: hidden
+transition(border 0.3s ease)
backface-visibility: hidden
> span
font-size: 20px
line-height: 32px
font-weight: bold
color: #cbcbcb
padding: 0 5px
+transition(color 0.3s ease)
&.fade
+animate(colorFade, 0.6s, 0s)
&.hover
border-color: darken(#cbcbcb, 10%)
+box-shadow(0 0 14px 0 #efefef)
> span
color: darken(#cbcbcb, 10%)
&.open
ul
height: 100px
opacity: 1
.close
float: right
ul
display: none
list-style-type: none
padding: 0
margin: 0
font-weight: 200
width: 100%
margin-top: 10px
+transition(all 0.3s ease)
padding: 10px 5px 0
margin-top: 15px
a
text-decoration: none
font-size: 20px
color: #cbcbcb
font-weight: bold
+transition(color 0.3s ease)
&:hover
color: #636363
&.active
color: #636363
li
padding: 8px 0
.close
fill: #cbcbcb
position: relative
+transform(rotate(0deg))
+transition(all 0.3s ease)
cursor: pointer
path
+transition(all 0.3s ease)
&:hover
path
fill: #404040
&.active
+transform(rotate(-135deg))
path
fill: #404040
View Compiled
// Note:
// There is a file named svg_extend.js which is loaded here.
// It allows us to user add/remove/has class which SVG's
// don't have out of the box.
// Grab our elements
// so we can use them below
var closeIcon = document.querySelectorAll('svg.close'),
$container = $('.container'),
$list = $container.find('ul'),
$links = $container.find('a'),
$text = $container.find('span');
// When the '+' icon is clicked...
$(closeIcon).on('click', function() {
// Add class to rotate icon to an 'x'
this.toggleClass('active');
// Toggle the list
$list.toggle();
});
// When the icon is hovered, add
// a class to it's parent so we can style it
$(closeIcon).hover(function() {
$container.addClass('hover');
}, function() {
$container.removeClass('hover');
});
$links.on('click', function() {
$links.removeClass('active');
$(this).addClass('active');
$text.text($(this).text()).addClass('fade');
setTimeout(function(){
$text.removeClass('fade');
}, 800);
$list.toggle();
closeIcon.toggleClass('active');
});
