JSFiddle - React, Tailwind, and code Playground

by imsky

HTML

<div id="settings">
    <a href="#" class="settingsbutton">
        <span class="txt"><? echo $username_auth; ?></span>
        <span class="ar">&#9660;</span>
    </a>
    <div class="settingsmenu">
        <ul>
            <li><a href="#">Edit Profile</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
</div>

CSS

/* settings button */
#settings {
    left: 20px;
    margin: 0;
    position: relative;
    top: 9.5px;
    width: 175px;
}
.settingsbutton {
    padding:8px 10px;
    border:1px solid #caced9;
    border-top-color:#d3d8e2;
    border-bottom-color:#bfc4cf;
    display:block;
    font-weight:700;
    color:#82889b;
    box-shadow:0 1px 2px rgba(0,0,0,0.15);
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #EFF0F3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#EFF0F3));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EFF0F3',GradientType=0 );
    background: -o-linear-gradient(top, #FFFFFF 0%,#EFF0F3 100%);
    position:relative;
    cursor:pointer;
}
.settingsbutton span.txt {
    height:15px;
    padding:0 0 0 22px;
    background:url(/images/icons/cog.png) no-repeat;
    display:block;
    line-height:16px;
    line-height:15px\9; /* Dirty IE Hack */
}
.settingsbutton span.ar {
    font-size:10px;
    position:absolute;
    top:10px;
    right:10px;
}
.settingsbutton:hover {
    color:#595e6e;
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #e7e8ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e7e8ef));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#e7e8ef',GradientType=0 );
    background: -o-linear-gradient(top, #FFFFFF 0%,#e7e8ef 100%);
    text-decoration: underline;
}
.settingsbutton:active, .settingsbutton.active {
    color:#595e6e;
    border-color:#c7cbd3;
    border-top-color:#bcc1cb;
    border-bottom-color:#d1d4db;
    box-shadow:inset 0 1px 2px #d2d4e3;
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #EFF0F3 0%, #FFFFFF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EFF0F3), color-stop(100%,#FFFFFF));
   ...

JavaScript

$(function() {
    var button = $('.settingsbutton');
    var menu = $('.settingsmenu');
    $('ul li a', menu).each(function() {
        $(this).append('<span />');
    });
    $("a", menu).bind("click", function(e) {
        button.trigger("closemenu");
        e.preventDefault();
        e.stopPropagation();
    });
    button.bind("openmenu", function() {
        menu.show();
        $('.ar', this).html('&#9650;').css({
            top: '8px'
        });
        $(this).addClass('active');
        $(document).bind("mousedown.x", function(e) {
            if ($(e.target).parents(".settingsmenu").length == 0) {
                button.trigger("closemenu");
            }
        });
    });
    button.bind("closemenu", function() {
        menu.hide();
        $(this).removeClass('active');
        $('.ar', this).html('&#9660;').css({
            top: '10px'
        });
        $(document).unbind("mousedown.x");
    });
    button.bind("mousedown", function(e) {
        $(this).trigger("openmenu");
        e.preventDefault();
        e.stopPropagation();
    });
});