tinynav.js
This implements a fork of the tinynav.js jQuery library and has an associated admin settings page for configuring it to use in any of your themes. As of 1.1 this module now comes with code based heavily on tinynav.js that allows for rendering nested structures as well as limiting how deep a structure to display in the dropdown.
A screencast / tutorial of how you can use this module is included with the Tinynav and Chamfer for flexible, colorizable mobile design screencast.
What this library provides
Description from the project site:
TinyNav.js is a tiny jQuery plugin (362 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.
Special note
Because of improvements to the original code-base as well as our community's authorization to fork tinynav.js and include under GPL the original code-base no longer functions as a library as cleanly as it once did. If you want to use the original library, stick to version 1.1 or lower of tinynav. If you want to utilize the enhancements in 1.2+, utilize the built in library instead of the downloadable one.
See issue: #1992816: Shows FALSE or TRUE as first 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.
What this module provides
- Implementation of the tinymenu.js library
- Settings page to define
- Header flag
- Selector attribute
- jQuery selector of the menu to target
- Media query to use to snap between menu modes
Defaults are provided that should work with Omega sub-themes out of the box though you'll probably want to tweak the media query and css selector to match your specific theme. This project and library do not require Omega, this module has just been tested for use within it.
Recommendation to theme developers
Most themes start with "mobile first" and this module is no exception. Make sure your media queries involve defining a max-width so that mobile is the assumed device viewing your content. You can craft what ever media query you like but this is a strong recommendation.
Similar projects
Library created by @viljamis
Original implementation for use with Chamfer theme
This project has been created as part of the ELMS initiative at Pennsylvania State University.