dropdown menu, with walker

Question

I'm using the following walker to create a dropdown menu that I will use on a mobile version of a project I'm working on... it works fine, however, when I select the page, it doesn't load the page, what am I missing?

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{
    function start_lvl(&$output, $depth){
      $indent = str_repeat("\t", $depth); // don't output children opening tag (`<ul>`)
    }

    function end_lvl(&$output, $depth){
      $indent = str_repeat("\t", $depth); // don't output children closing tag
    }

    function start_el(&$output, $item, $depth, $args){
      // add spacing to the title based on the depth
      $item->title = str_repeat("&nbsp;", $depth * 4).$item->title;

      parent::start_el(&$output, $item, $depth, $args);

      // no point redefining this method too, we just replace the li tag...
      $output = str_replace('<li', '<option', $output);
    }

    function end_el(&$output, $item, $depth){
      $output .= "</option>\n"; // replace closing </li> with the option tag
    }
}

Thanks in advance.

Answer 1

You have to tell the browser to change the address in some way.

A simple javascript solution is to put the item URL into the value attribute, and trigger the address change when the option is selected.

Replace:

$output = str_replace('<li', '<option', $output);

With:

$output = str_replace(
 '<li',
 '<option value="'.$item->url.'" onchange="window.location.href=this.value"',

 $output);