hiding select menu and opening with a button

Question

Hey guys im on my mobile trying to use jsbin and what a pain. Anyways is there a way to hide a select menu and on click of a button open the select menu and since mobile devices shows a popup box id want this for my navigation for mobiles (responsive)

My submenus just dont work with the ux and ui with the mobile responsive layout so I was thinking of using a select menu and those things are ugly so wanted your opinion on how to achieve this if at all possible. Ive tried this http://jsbin.com/narigudu/1/edit

Answer 1

This really is a fairly broad question and normally I'd vote to close it -- but I'm going to try to give you some usable pointers.

You have a few options at your disposal and they all have their pros and cons.

Media Queries Link

This is the "stock answer" to these kinds of questions. Put both the drop down list and the button to pop up the list. Use media query to check screen resolution and hide/unhide the proper one.

JavaScript viewport detection Link

This one is a little trickier since you have to also sit on the windowl.resize event for those pesky people who rotate their phones. Make sure you are getting the viewport and not the screen.

Device Detection Link

Um.. don't. Really. Device detection is bad and lists go stale. MUCH better to use the other methods and really, media queries are the right solution to this.