TinyNav.js is a tiny jQuery plugin (304 bytes minified and gzipped) that converts
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.
/* styles for desktop */
.tinynav { display: none }
/* styles for mobile */
@media screen and (max-width: 600px) {
.tinynav { display: block }
#nav { display: none }
}$("#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 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 }
}