Responsive Select Menu

View Demo 1

View Demo 2 in a Responsive WordPress Theme

One common UI paradigm for navigation menus with responsive design is to display a select box (form element) for mobile devices. This plugin allows you to turn your WordPress 3 menu into a select box below a width of your choice.

Features

• Takes up less screen real estate on mobile devices
• Easier navigation for touch screens
• Works automatically – no need to add extra PHP code

Highly Configurable

Through the Responsive Select Menu Control Panel you can:

• New in 1.2 – select which theme locations to apply the menu to
• Set your width breakpoint (where your menu switches from your standard menu to a select box)
• Configure how many levels you wish to include in the select menu. Set it to 1 to include only the top-level menu items.
• Choose the character used to indent your submenu items within the select box
• Choose whether or not to exclude “dummy” items that don’t have links
• Set the text of the first menu item

The demo is built with UberMenu – WordPress Mega Menu Plugin , but it is designed to work with any UL-based WordPress 3 menu.

Based on the excellent tutorial from Chris Coyier and CSS Tricks – thanks!