Last Updated: February 25, 2016
·
1.887K
· idered

BEM Based, responsive dropdown

See preview

HTML structure:

<div class="dropdown">
    <div class="dropdown__text">Your account</div>
    <div class="dropdown__toggle"></div>
    <ul class="dropdown__content">
        <li><a href="">Profile</a></li>
        <li><a href="">Settings</a></li>
        <li><a href="">Sign out</a></li>
    </ul>
</div>

Full code(HTML, CSS, JS) here

2 Responses
Add your response

Nice idea, and minimally-designed (which is nice). Mobile browsers will not treat this like a form element, so the behavior may not be optimal for those devices. Just something to keep in mind.

Chosen.js does similar designy things with native form elements, but you can control its implementation – display the fancy UI only for non-touch enabled browsers, for instance.

over 1 year ago ·

@pe1999 Form elements wasn't my target but you can still use this for elements like this http://i.imgur.com/V80xQVn.png to change sorting of elements on page. Just add "?sort=popular" or "?sort=latest". As you can see, you can still use this to send data via GET method :)

over 1 year ago ·