Download
User Rating: 4.8/5 ( 1 votes)
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.
Browsers Supported
-
Internet Explorer 6,7,8,9
-
Firefox 6,8
-
Safari 5
-
Chrome 15
-
Opera 11.5
-
iOS Safari
-
Opera Mobile 10.1
-
Opera Mini for iOS
-
IE7 Mobile
-
Firefox Mobile
-
Android browser
-
Kindle browser
1. INCLUDE JAVASCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="tinynav.min.js"></script>
2. HTML
<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>
3. CSS
/* styles for desktop */
.tinynav { display: none }
/* styles for mobile */
@media screen and (max-width: 600px) {
.tinynav { display: block }
#nav { display: none }
}
4. JAVASCRIPT
<script>
$(function () {
$("#nav").tinyNav();
});
</script>
5. OPTIONS
$("#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)
});
JS Tutorial
