CodePen

HTML

            
              <aside class="facet">
    <ul class="list">
        <li class="list-item">
            <a href="#facet-colour" class="facet-label">Colours</a>
            <ul id="facet-colour" class="list facet-content facet-color">
                <!-- Using inline styles to replicate how this would be coded when database driven -->
                <li class="list-item item-color first"><i class="teardrop"></i></li>
              <li class="list-item item-color" style="background-color: #666;"><i class="teardrop"></i></li>
                <li class="list-item item-color" style="background-color: #3398d4;"><i class="teardrop"></i></li>
                <li class="list-item item-color" style="background-color: #b0d578;"><i class="teardrop"></i></li>
                <li class="list-item item-color" style="background-color: #d47775;"><i class="teardrop"></i></li>
                <li class="list-item item-color last" style="background-color: #efb145;"><i class="teardrop"></i></li>
            </ul>
        </li>
        <li class="list-item">
            <a href="#facet-tools" class="facet-label">Tools</a>
            <ul id="facet-tools" class="list facet-content facet-blocks">
                <li class="list-item first">
                    <a href="#" class="item-block">
                        Rounded Rectangle
                    </a>
               </li>
                <li class="list-item first">
                    <a href="#" class="item-block">Normal Rectangle</a>
                </li>
                <li class="list-item active">
                    <a href="#" class="item-block">Line Tool</a>
                </li>
                <li class="list-item">
                    <a href="#" class="item-block">Ellipse/ Circle</a>
                </li>
                <li class="list-item last">
                    <a href="#" class="item-block">Type Tool</a>
                </li>
                <li class="list-item last">
                    <a href="#" class="item-block">Paintbrush Tool</a>
                </li>
            </ul>
        </li>
        <li class="list-item facet-label last">
            <a href="#" class="btn btn-primary">Import Image</a>
        </li>
    </ul>
</aside>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);

%clearfix {
    *zoom: 1;
    &:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        overflow: hidden;
        visibility: hidden;
    }
}

.facet {
    background-color: #FFF;
    border: 1px solid #bdbdbd;
    overflow: hidden;
    @include border-radius(3px);
    @include box-shadow(0 2px 6px 0px rgba(0,0,0,0.1), inset 0 -2px 1px rgba(0,0,0,0.1));
    .list-item {
        border-bottom: 1px solid #f2f2f2;
    }
    .active {
        &.list-item {
            border-bottom: 1px solid #d7d7d7;
        }
        .facet-label {
            border-bottom: 1px solid #bdbdbd;
        }
        .facet-subset {
            display: block;
        }
    }
}

.item-color {
    float: left;
    display: block;
    background-color: #000;
    width: 30px;
    height: 30px;
    margin: 15px 7px;
    text-indent: -9999px;
    @include border-radius(3px);
    &.first {
        margin-left: 15px;   
    }
    &.last {
        margin-right: 15px;
    }
    &:hover {
        .teardrop {
           @include opacity(1);
           @include transition(opacity .5s);
        }
    }
}

.facet-color,
.facet-blocks {
    @extend %clearfix;
    background-color: #f4f4f4;
}

.facet-label {
    display: block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: #999;
    font-weight: bold;
    border-bottom: 1px solid #f2f2f2;
    &.active {
        border-bottom: 1px solid #bdbdbd;
    }
    &.last {
        border: none;
    }
}

.facet-blocks {
    background-color: #FFF;
    @extend %clearfix;

    .item-block {
        float: left;
        display: block;
        padding: 70px 40px 20px;
        width: 60px;
        height: 50px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        color: #333;
        line-height: 1.6;
        font-weight: bold;
        @include box-shadow(-1px -1px 0 #f2f2f2);
        &:hover {
            background-color: #fafafa;    
        }
    }
    
    .list-item {
        border: 0px;
        &.last .item-block {
            border-bottom: 0;
        }
        &.active {
            .item-block {
                background-color: #f6f6f6;
            }
        }
        &.first {
            .item-block {
                box-shadow: 0;
            }
        }
    }
}

.btn {
    display: block;
    border: 1px solid #d7d7d7;
    border-bottom: 1px solid #bdbdbd;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #333;
    @include border-radius(3px);
    @include box-shadow(0 1px 4px -2px rgba(0,0,0,0.6),inset 0 1px 0px rgba(255,255,255,1));
    @include background(linear-gradient(rgba(252,252,252,1), rgba(240,240,240,1)));
    &:hover {
      @include background(linear-gradient(lighten(rgba(252,252,252,1), 1%), lighten(rgba(240,240,240,1),1%)));
      color: lighten(#333, 10%);
    }
    &:active {
      @include background(linear-gradient(darken(rgba(252,252,252,1), 1%), darken(rgba(240,240,240,1),1%)));
      @include box-shadow(inset 0 1px 1px rgba(0,0,0,0.2));
      border-bottom-color: #d7d7d7;
      border-top-color: #bdbdbd;
      color: darken(#333, 10%);
    }
}

.teardrop {
    display: block;
    background: rgba(255,255,255,0.9);
    width: 10px;
    height: 10px;
    @include opacity(0);
    @include border-radius(100px 0 100px 100px);
    @include transition(opacity .5s);
    @include transform(translateX(10px) translateY(10px) rotate(-45deg));
}

/* Demo presentation only */

body {
    background-color: #f7f7f7;
    font: 14px / 1.2 'Oxygen', Helvetica, Arial;
}

.facet {
    width: 280px;
    margin: 100px auto;
    font-size: 0.6rem;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Caching selectors
var $button = $('.btn'),
    $facetHeading = $('.facet-label'),
    $facetContent = $('.facet-content');

// Stops Codepen jumping when you click to see button active style.
$button.click(function(){
  return false;
});

// Clicking facet headings open and closes menus
$facetHeading.on('click', function(e) {
    e.preventDefault();
  
    var $this = $(this),
        $parent = $this.parent(),
        targetel = $this.attr("href");
    
    // Add active to parent, used for styling.
    if($(targetel).is(':visible')){
      $parent.removeClass('active');
    } else {
      $parent.addClass('active');
    }

    $(targetel).slideToggle('fast');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................