├── .gitignore
├── README.textile
├── jQuery.menutron.js
└── jQuery.menutron.min.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Ignore pattern for menutron
 2 | 
 3 | # OSX
 4 | .DS_Store
 5 | .AppleDouble
 6 | .LSOverride
 7 | Icon
 8 | ._*
 9 | .Spotlight-V100
10 | .Trashes


--------------------------------------------------------------------------------
/README.textile:
--------------------------------------------------------------------------------
  1 | h1. Menutron 
  2 | 
  3 | A jQuery plugin for responsive navigation menus
  4 | 
  5 | h2. Demo
  6 | 
  7 | Plugin Demo: "http://micjamking.github.com/Menutron/":http://micjamking.github.com/Menutron/
  8 | 
  9 | h2. What it does
 10 | 
 11 | Menutron transforms your navigation menus from a list to a select menu when resizing your browser. On mobile devices, the select menu pulls up a native control, making it easier to pick an item.
 12 | 
 13 | * *It's concise* - When implemented in a responsive design, your menu becomes consolidated in to a single control, saving you horizontal and/or vertical real-estate.
 14 | * *It's convenient* - On mobile devices, the select controls will activate a native control, like the picker control for iOS, which can be navigated using drag, nudge, or flick gestures. 
 15 | * *It's intuitive* - It works on any type of list (ol,ul,dl) and automatically adds a menu title of "Choose..." for easy recognition 
 16 | 
 17 | 
 18 | h2. How it works
 19 | 
 20 | Let's say your navigation menu markup looks like this:
 21 | 
 22 | <pre>
 23 | <nav id="main">
 24 |   <ul>
 25 |     <li><a href='google.com'>Google</a></li>
 26 |     <li><a href='facebook.com'>Facebook</a></li>
 27 |     <li><a href='twitter.com'>Twitter</a></li>
 28 |     <li><a href='pinterest.com'>Pinterest</a></li>
 29 |     <li><a href='flickr.com'>Flickr</a></li>
 30 |   </ul>
 31 | </nav>
 32 | </pre>
 33 | 
 34 | Simply call the Menutron function, using the list menu container (ie. @<nav id="main">@) as a selector...
 35 | 
 36 | <pre>
 37 | <script>
 38 |   $(function(){
 39 |     $("nav#main").menutron();
 40 |   });
 41 | </script>
 42 | </pre>
 43 | 
 44 | ...and your list _transforms_ in to a select control when the screensize is below the specified screen width!
 45 | 
 46 | <pre>
 47 | <nav id="main">
 48 |   <select>
 49 |     <option selected="selected" value="">Choose...</option>
 50 |     <option value='google.com'>Google</option>
 51 |     <option value='facebook.com'>Facebook</option>
 52 |     <option value='twitter.com'>Twitter</option>
 53 |     <option value='pinterest.com'>Pinterest</option>
 54 |     <option value='flickr.com'>Flickr</option>
 55 |   </select>
 56 | </nav>
 57 | </pre>
 58 | 
 59 | By default, the plugin has a media query set to @max-width: 600px@. If you want to set your own media query, the plugin has an option for that. Just pass in your desired size to @maxScreenWidth@ like below:
 60 | 
 61 | <pre>
 62 | <script>
 63 |   $(function(){
 64 |     $("nav#main").menutron({
 65 |       maxScreenWidth: 480
 66 |     });
 67 |   });
 68 | </script>
 69 | </pre>
 70 | 
 71 | Now when a browser width is below *480px*, the list will transform in to a select menu.
 72 | 
 73 | If you want your own custom menu title for the select menu on mobile, just pass in the desired title to the @menuTitle@ option as below:
 74 | 
 75 | <pre>
 76 | <script>
 77 |   $(function(){
 78 |     $("nav#main").menutron({
 79 |       maxScreenWidth: 480,
 80 |       menuTitle: 'Main Menu:'
 81 |     });
 82 |   });
 83 | </script>
 84 | </pre>
 85 | 
 86 | h2. What you'll need (dependencies)
 87 | 
 88 | * *"A responsive design":http://www.alistapart.com/articles/responsive-web-design/* ;)
 89 | * *"Latest jQuery":http://code.jquery.com/jquery-latest.js* (It may work on previous versions, but it's only been tested on the latest)
 90 | * For devices with retina displays, a @<meta name="viewport" content="initial-scale=1.0" />@ in the head will make the device screen resolution equal to the device screen size (1:1). Although not needed, I also disable zooming when controls are selected. Below is my meta tag:
 91 | 
 92 | <pre>
 93 | <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
 94 | </pre>
 95 | 
 96 | h2. FYI
 97 | 
 98 | * As of 04.27.2012, Menutron can support nested lists up to 2 levels (ie. ul > li > ul > li).
 99 | * In the next update, I plan to support definition list titles (@<dt>@) as the select menu's default title when there is one available. As of 04.27.2012, there is an option for to specify your own custom select menu title.
100 | * If you have any suggestions, comments, or creative insults for my code, "add an issue":https://github.com/micjamking/Menutron/issues/new or "fork the repo":https://github.com/micjamking/Menutron/fork_select.
101 | 
102 | 
103 | 
104 | *MIT LICENSE*
105 | 
106 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
107 | 
108 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
109 | 
110 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
111 | 
112 | *Copyright*
113 | Copyright (c) 2012 Mike King (@micjamking)


--------------------------------------------------------------------------------
/jQuery.menutron.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (c) 2012 Mike King @micjamking (http://dev.85pixels.com)
  3 |  * 
  4 |  * jQuery Menutron plugin
  5 |  * Version 1.0 (March 2012)
  6 |  *
  7 |  * Licensed under the MIT License
  8 |  */
  9 | 
 10 | (function($){
 11 | 	$.fn.menutron = function(options) {
 12 | 
 13 | 		var defaults = {
 14 | 			maxScreenWidth: 600,
 15 | 			menuTitle: 'Choose...'
 16 | 		};
 17 | 
 18 | 		var options = $.extend(defaults, options);
 19 | 
 20 | 		return this.each(function() {
 21 | 			
 22 | 			var menu = $(this).children();		
 23 | 			var selectMenu = $('<select>').css("display", "none");
 24 | 			var optGroup = $('<optgroup>').css("display", "none");
 25 | 
 26 | 			init();
 27 | 
 28 | 			function init() {
 29 | 				checkWidth();
 30 | 				createMenu();
 31 | 				transformMenu();
 32 | 			}
 33 | 			
 34 | 			function checkWidth(){
 35 | 				
 36 | 				// Media query for device screens (default: 600px)
 37 | 				// *Note, I would like to use window.matchMedia(screenWidth).matches here, but it does not work on 		
 38 | 				// Android 2.3 (Gingerbread). https://developer.mozilla.org/en/DOM/window.matchMedia#section_4
 39 | 				if ($(window).width() < options.maxScreenWidth){
 40 | 
 41 | 					// Hides the original menu list from the display
 42 | 					$(selectMenu).css("display", "inline-block");
 43 | 
 44 | 					// Hides the original menu list from the display
 45 | 					$(menu).css("display", "none");				
 46 | 				} else {
 47 | 
 48 | 					// Hides the select menu from the display
 49 | 					$(selectMenu).css("display", "none");
 50 | 
 51 | 					// Show the original menu list
 52 | 					$(menu).css("display", "block");
 53 | 				}
 54 | 			}
 55 | 
 56 | 			function createMenu(){
 57 | 
 58 | 				// Loop through the current list menu & adds the li's text
 59 | 				// & the anchors url to the option & it's value respectively.
 60 | 				$(menu).children().each(function() {
 61 | 				
 62 | 					// If using a descriptive list, 'dl',
 63 | 					// this only adds 'dd' to selectMenu & skips over 'dt'
 64 | 					if($(this).get(0).tagName !== 'DT'){
 65 | 						
 66 | 						if($(this).find('ul,ol,dl').length){
 67 | 							
 68 | 							$(optGroup).attr("label",$(this).children(':first').text());
 69 | 							var option = $('<option>').text($(this).children(':first').text());
 70 | 							var link = $(this).children("a").attr("href");
 71 | 							$(option).attr("value", link);
 72 | 							$(option).appendTo(optGroup);
 73 | 							
 74 | 							var nestedList = $(this).children().not(':first');
 75 | 							
 76 | 							$(nestedList).children().each(function(){
 77 | 								var option = $('<option>').text($(this).text());
 78 | 								var link = $(this).children("a").attr("href");
 79 | 								$(option).attr("value", link);
 80 | 								$(option).appendTo(optGroup);
 81 | 							});
 82 | 							console.log(optGroup);
 83 | 							$(optGroup).appendTo(selectMenu);
 84 | 						} else {
 85 | 							var option = $('<option>').text($(this).text());
 86 | 							var link = $(this).children("a").attr("href");
 87 | 							$(option).attr("value", link);
 88 | 							$(option).appendTo(selectMenu);
 89 | 						}
 90 | 					} 
 91 | 				});
 92 | 
 93 | 				var menuTitle = '<option selected="selected" value>' + options.menuTitle + '</option>';
 94 | 
 95 | 				// Appends the newly created list to menu's container element
 96 | 				$(selectMenu).prepend(menuTitle);
 97 | 				selectMenu.appendTo($(menu).parent());
 98 | 
 99 | 				// Change Window.location, ie. the current url,
100 | 				// to the value of the selected option
101 | 				selectMenu.change(function(){
102 | 					if($(this).val()!=''){
103 | 						window.location.href=$(this).val();
104 | 					}
105 | 				});
106 | 			}
107 | 
108 | 			function transformMenu() {
109 | 				$(window).resize(function(){checkWidth();});	
110 | 			}
111 | 
112 | 		});
113 | 	};
114 | })(jQuery);


--------------------------------------------------------------------------------
/jQuery.menutron.min.js:
--------------------------------------------------------------------------------
1 | /*
2 |  * Copyright (c) 2012 Mike King @micjamking (http://dev.85pixels.com)
3 |  * 
4 |  * jQuery Menutron plugin
5 |  * Version 1.0 (March 2012)
6 |  *
7 |  * Licensed under the MIT License
8 |  */
9 | (function(a){a.fn.menutron=function(b){var c={maxScreenWidth:600,menuTitle:"Choose..."};var b=a.extend(c,b);return this.each(function(){var i=a(this).children();var f=a("<select>").css("display","none");var h=a("<optgroup>").css("display","none");g();function g(){e();d();j()}function e(){if(a(window).width()<b.maxScreenWidth){a(f).css("display","inline-block");a(i).css("display","none")}else{a(f).css("display","none");a(i).css("display","block")}}function d(){a(i).children().each(function(){if(a(this).get(0).tagName!=="DT"){if(a(this).find("ul,ol,dl").length){a(h).attr("label",a(this).children(":first").text());var l=a("<option>").text(a(this).children(":first").text());var m=a(this).children("a").attr("href");a(l).attr("value",m);a(l).appendTo(h);var n=a(this).children().not(":first");a(n).children().each(function(){var o=a("<option>").text(a(this).text());var p=a(this).children("a").attr("href");a(o).attr("value",p);a(o).appendTo(h)});console.log(h);a(h).appendTo(f)}else{var l=a("<option>").text(a(this).text());var m=a(this).children("a").attr("href");a(l).attr("value",m);a(l).appendTo(f)}}});var k='<option selected="selected" value>'+b.menuTitle+"</option>";a(f).prepend(k);f.appendTo(a(i).parent());f.change(function(){if(a(this).val()!=""){window.location.href=a(this).val()}})}function j(){a(window).resize(function(){e()})}})}})(jQuery);


--------------------------------------------------------------------------------