If you’re developing responsive sites with WordPress you’ve probably stumbled upon something like this. What we’re doing is essentially telling WordPress that instead of a <ul> we want a <select> and instead of <li> s we want <option> elements.

The following is a very simple example of such a Walker Class. Include this in your functions.php:

// Select Walker

Class Walker_Select extends Walker_Nav_Menu { 

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $selected = in_array('current-menu-item',$classes) ? 'selected="selected"' : '';
        $output .= '<option '.$selected.' value="'.$item->url.'">';
        $output .= $item->title;
    }
    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= "</option>";
    }
}

Call it like this:

<?php
       $defaults = array(
          'theme_location'  => 'primary',
          'container'       => 'nav',
          'container_id'    => 'responsive-menu',
          'menu_class'      => 'responsive-menu',
          'echo'            => true,
         'items_wrap'    => '<select id="responsive-select" class="%2$s">%3$s</select>',
          'walker'      => new Walker_Select()
       );
        wp_nav_menu( $defaults );
?>

In order to make the redirecting work you need a little jQuery:

$( document ).ready(function() {

  $('#responsive-select').on('change', function() {
    var href = $(this).val();
    window.location = href;
  });

});

That’s it!

If you liked this post please share it on Facebook, Twitter and Google+.