BEM Based, responsive dropdown

#css

#dropdown

#js

#html

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

Written by Kasper Mikiewicz

Say Thanks

Respond

Related protips

Fully custom select box, simple css only

570.8K

Change the Bootstrap NavBar Breakpoint

500.1K

Creating full width (100% ) container inside fixed width container.

465.2K

2 Responses

Add your response

artinruins

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 ·

idered

@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 ·