Toggle options menu

by mnk

HTML

<div class="display-options">
    <span class="display-trigger">+ Display Options</span>
    <span class="display-panel">
        <ul>
            <li>option a</li>
            <li>option b</li>
            <li>option c</li>
        </ul>
    </span>
</div>
<p><br><br>alsjhdasjk jkdh kjsdh askjdh askjdh sdkaghfdshfg sadjhfg sadhjfg adhjsfg dhjhasdfg adhjsfg jadhsfg adhjsfg adhjsfg adhjsgf jadhsgf jadhsgf jadhsgf jadhsf jadhsf adhjsgf jadhsgf adhjsgfjds jsdhafg jhsdagf adhjsgf adhjsgf adhjsfg jadhsgf adhjsfg asdhjfg adhjsfg dshjfg sdajhfgsadjhfg adhjsf gadhjsfg adhjsfg adhjsfg adhjsfg asdjhfg sadjhfg ahjsdfg adhjsfg adhjsfg adhjsfg  gsgsadfgsadjfgasdfgsdjhg sdhjfg sadhjf gsdajhfg asjhd fgsdjhfg djhfg sdajfg asdjhfg asjhfg dsj fgdsjfgasdjfgasdfjsfjdgsasjhdfg asjhdfg asjhdfg asdjhfg sadhjf </p>

CSS

body {
    font: 14px/20px Helvetica;
}
.display-options {
    position: absolute;
    top: 20px;
    right: 100px;
}
.display-trigger {
    cursor: pointer;
    padding: 4px 7px;
    background-color: #bbb;
    color: white;
    -webkit-transition: all .15s ease-in;
       -moz-transition: all .15s ease-in;
        -ms-transition: all .15s ease-in;
         -o-transition: all .15s ease-in;
            transition: all .15s ease-in;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}
.display-trigger.open {
    background-color: #2d93d4;
}
.display-panel {
    position: absolute;
    top: 20px;
    right: 0;
    width: 200px;
    min-height: 100px;
    border: solid 1px #9296a3;
    background-color: white;
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    -webkit-transition: opacity .15s ease-in;
       -moz-transition: opacity .15s ease-in;
        -ms-transition: opacity .15s ease-in;
         -o-transition: opacity .15s ease-in;
            transition: opacity .15s ease-in;
}
.display-panel.open {
    opacity: 1;
}

.display-panel ul {
    list-style: none;
    padding: 5px 10px;
}

p {
    color: #707070;
}

JavaScript

$('.display-trigger').click(function(){
    $(this).toggleClass('open');
    $('.display-panel').toggleClass('open');
});


$('body').click(function(e){
    var target = $(e.target);
    
    if (!target.hasClass('display-trigger') && !target.closest('.display-panel').length){
        $('.display-trigger').removeClass('open');
        $('.display-panel').removeClass('open');
    }
});