Replace menu with select input

Sometimes it's better to use native browser controls for certain tasks. And maybe creating navigation on mobile devices is one of those times. Script goes through your menu and creates a select input.

This solution relies on Javascript, so don't forget to think about fallback styles.

Try changing width of your browser window to see this method in action. And use the source code of this page as your guide.

Javascript

Don't forget to include jQuery

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Include a link to a small Responsive Menu plugin.

  1. <script src="jquery.mobilemenu.min.js"></script>

Call the script on navigation element (.menu_main ul in this demo) and change defaults if needed.

  1. $(
  2. function(){
  3. $('.menu_main ul').mobileMenu({
  4. //combine: true,
  5. //groupPageText: "Main",
  6. nested: true,
  7. prependTo: ".menu_main",
  8. switchWidth: 480,
  9. topOptionText: "Menu"
  10. });
  11. }
  12. )