TinyNav.js is a tiny jQuery plugin (452 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.
Check out also the new version called Responsive Nav.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="tinynav.min.js"></script><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>/* styles for desktop */
.tinynav { display: none }
/* styles for mobile */
@media screen and (max-width: 600px) {
.tinynav { display: block }
#nav { display: none }
}<script>
$(function () {
$("#nav").tinyNav();
});
</script>$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
indent: '- ', // String: Specify text for indenting sub-items
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});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:
$('html').addClass('js');@media screen and (max-width: 600px) {
.js .tinynav { display: block }
.js #nav { display: none }
}Please post your bug reports to GitHub issues. If you need support, try Stack Overflow.
Download the latest version from GitHub