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.
<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!
/* 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.
<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.
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: truenested
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 -<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>
selectnav('example-nav1', {
activeclass: 'act',
nested: false,
label: false
});
<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>
selectnav('example-nav2', {
label: '### Table of content ### ',
nested: true,
indent: '-'
});