button-aside faux select menu

Use a combination of button and aside as siblings to create a fully customizable and accessible select menu.

by Gerald Fullam

HTML

<div class="select">
    <button class="selected collapsed" type="button">Action</button>
    <aside class="options">
        <ul>
            <li>
                <button class="action" type="button" data-action="changesort" data-value="1" data-pt="true">Reset exercise</button>
            </li>
            <li>
                <button class="action" type="button" data-action="changesort" data-value="2" data-pt="true">Practice exercise</button>
            </li>
            <li>
                <button class="action" type="button" data-action="changesort" data-value="3" data-pt="true">View certificate</button>
            </li>
        </ul>
    </aside>
</div>

CSS

.select {
    display: inline-block;
}
.select h3 {
    display: inline-block;
}
.select button.selected {
    cursor: pointer;
    margin: 0;
    padding: 3px;
    border: 1px solid #eee;
    border-radius: 3px;
}
.select aside.options button {
    cursor: pointer;
    border: none;
}
.select .collapsed + .options {
    display: none;
}
.select .expanded + .options {
    display: block;
}

JavaScript

$('.select>button').click(dropdown);
$('.options button').click(action);

function dropdown(e) {
    var $doc = $(document),
        $target = $(e.target),
        $parent = $target.offsetParent(),
        $menu = $target.next(".options"),
        autoclose = function (ua) {
            // Auto close the dropdown menu if: user presses escape or clicks outside of it
            if (ua.keyCode === 27 || ua.target !== e.target) {
                $target
                    .removeClass("expanded")
                    .addClass("collapsed");
                $doc.off("keydown click", autoclose);
                $parent.attr("class", $parent.attr("class")); //ie8 reflow fix
            }
        };

    // Toggle collapsed/expanded classes; Bind/Unbind autoclose function to user actions
    $target.toggleClass("collapsed expanded");
   if ($target.hasClass("expanded")) {
        $doc.on("keydown click", autoclose);
    } else {
        $doc.off("keydown click", autoclose);
    }
    $parent.attr("class", $parent.attr("class")); //ie8 reflow fix

    return this;
};

function action(e) {
    console.log(e);   
}