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.


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>

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

  $(function () {

5. Options you can customize

  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:




@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