TinyNav.js · Convert navigation to a tiny select box on small screen

by panchroma

HTML

<script src="https://dl.dropbox.com/u/2665617/bootstrap/js/tinynav.min.js"></script>
   
    <h1>TinyNav.js</h1>

    <ul id="nav">
      <li><a href="http://google.com">Google</a></li>
      <li class="selected"><a href="demo.html">Demo page</a></li>
      <li><a href="http://bing.com">Bing</a>
        <ul>
          <li><a href="http://google.com">Google</a></li>
          <li><a href="demo.html">Demo page</a></li>
          <li><a href="http://bing.com">Bing</a></li>
          <li><a href="http://yahoo.com">Yahoo</a></li>
        </ul>
      </li>
      <li><a href="http://yahoo.com">Yahoo</a></li>
    </ul>
    
    
    <ul id="nav2">
      <li><a href="http://google.com">Google</a></li>
      <li><a href="demo.html">Demo page</a></li>
      <li class="selected"><a href="http://bing.com">Bing</a></li>
      <li><a href="http://yahoo.com">Yahoo</a></li>
    </ul>

    <p><a href="http://tinynav.viljamis.com/">See the documentation</a></p>

CSS

/* styles for desktop */
    .tinynav { display: none }
    #nav .selected a, #nav2 .selected a { color: red }
    /* styles for mobile */
    @media screen and (max-width: 600px) {
      .tinynav { display: block }
      #nav, #nav2 { display: none }
    }

JavaScript

$(function () {

      // TinyNav.js 1
      $('#nav').tinyNav({
        active: 'selected',
        label: 'Menu'
      });
      
      // TinyNav.js 2
      $('#nav2').tinyNav({
        header: 'Navigation' // Writing any title with this option triggers the header
      });

    });