SelectNav.js

Responsive drop-down navigation
for mobiles and small screen devices.

About

SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a select drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.

Inspired by TinyNav.js, it was rewritten from scratch to become jQuery independent and customizable.

To see it in action just resize this page and observe the topbar.

Features

  • Independent - no external library or other dependecies
  • Ligthweight - only 1.5KB minified and 0.8KB minified+gziped
  • Customizable - to make it suit your needs
  • Compatible - tested with IE 6+, Firefox 3.6+, Chrome 4+, Safari 3+, Mobile Safari iOS 3.2+, Android 2.3+ Browser, Opera Mobile, Opera Mini.

Usage

1. HTML structure

<ul id="nav">
<li><a href="homepage.html">Homepage</a></li>
<li><a href="about.html" class="active">About us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Selectnav.js works with every navigation in form of ul or ol lists that follow the example above.

The id property will be later passed to the JavaScript function.

Do you have nested lists in your menu? Not a problem - just make sure they are proprerly structured!

2. CSS

/* default style */
.selectnav { display: none; }

/* small screen */
@media screen and (max-width: 600px) {
  .js #nav { display: none; }
  .js .selectnav { display: block; }
}

SelectNav.js adds a js class to the html element. Thanks to this, when JavaScript is disabled the default navigation will be visible.

3. JavaScript

<script src="selectnav.min.js"></script>
<script>selectnav('nav'); </script>

The script must be fired after the the DOM is ready. You can achieve this either by putting those two lines at the bottom of your page, either, what is recommended, by wrapping them in a domReady function.

Because the script relays on @media property of CSS3, it is highly recommended obligatory to use it together with a media query polyfill. If you haven't included it yet into your design, don't wait a second - download it right way and enjoy a responsive layout on IE 6-8 and some older mobile browsers.

4. Options...

The selectnav function takes as the second argument a key-value list of the following optional parameters:

  • activeclass string - contains the name of the active class. SelectNav.js will mark the correponding element with "selected" attribute. Change to any other string or to false if you want to disable this feature. Default: 'active'
  • autoselect boolean - instead of explicitly setting an active class, you can let SelectNav.js to automatically determine the active element. Default: true
  • nested boolean - SelectNav.js can handle multi-level, nested menus. Set this to false if you want only the uppermost level of the navigation to appear in the dropdown menu.
  • indent char - used together with nested attribute, it lets you specify the indent symbol. Default:
  • label string - set a label that will be the first element of the drop-down menu. Default: - Navigation -

Examples

Result

HTML

<ul id="example-nav1">
  <li><a href="index.html">Welcome</a></li>
  <li>
    <a href="active.html" class="act">Active</a>
    <ul><li><a href="hidden.html">Hidden</a></li></ul>
  </li>
  <li><a href="http://google.com">External</a></li>
  <li><a href="#top">Go to top</a></li>
</ul>

JS

selectnav('example-nav1', {
    activeclass: 'act',
    nested: false,
    label: false
});

Result

HTML

<ul id="example-nav2">
 <li><a href="c-1.html">Chapter 1</a>
 <ul>
  <li><a href="c1-1.html">Chapter 1.1</a>
  <ul>
    <li><a href="c1-1-1.html">Chapter 1.1.1</a></li>
    <li><a href="c1-1-2.html">Chapter 1.1.2</a></li>
   </ul>
  </li>
  <li><a href="c1-2.html">Chapter 1.2</a></li>
 </ul>
 </li>
</ul>

JS

selectnav('example-nav2', {
  label: '### Table of content ### ',
  nested: true,
  indent: '-'
});