TinyNav.js

Responsive navigation plugin that weights just 304 bytes

TinyNav.js is a tiny jQuery plugin (304 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item.

This isn't the first plugin to do this and it doesn't provide a lot of options, but it might be the smallest (file size). Scale this page to see the plugin in action.

Usage:

1. Link files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="tinynav.min.js"></script>

2. Add Markup

<ul id="nav">
  <li class="selected"><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

3. Add Styles

/* styles for desktop */
.tinynav { display: none }

/* styles for mobile */
@media screen and (max-width: 600px) {
    .tinynav { display: block }
    #nav { display: none }
}

4. Hook up the plugin

<script>
  $(function () {
    $("#nav").tinyNav();
  });
</script>

5. Options you can customize

$("#nav").tinyNav({
  active: 'selected' // Set the "active" class.
});

That is all! Note: If you worry how this will work when JS is disabled, then I suggest you to add 'js' class for <html> with JavaScript and use that in CSS when hiding the normal navigation, so that the navigation is still accessible if someone is browsing the site JavaScript disabled. Example:

JavaScript:

$('html').addClass('js');

Styles:

@media screen and (max-width: 600px) {
    .js .tinynav { display: block }
    .js #nav { display: none }
}

TinyNav.js is tested with the following browser

Download the latest version from GitHub
Fork me on GitHub