Make it responsive by default.

jquery.mobilemenu.js

@@ -4,44 +4,98 @@
  * version 1.0(31-OCT-2011)
  * 
  * Built on top of the jQuery library
- *  http://jquery.com
+ *  http://jquery.com
  * 
  * Documentation
- *  http:/mambows/mobilemenu
+ * http:/mambows/mobilemenu
  */
 (function($){
+
+// variable for storing the menu count when no ID is present
+var menuCount = 0;
+
 $.fn.mobileMenu = function(options) {
 
  var defaults = {
+ switchWidth: 481,
  defaultText: 'Navigate to...',
- className: 'select-menu',
- subMenuClass: 'sub-menu',
+ className: 'mobileMenu',
+ subMenuClass: 'mobileMenu-subMenu',
  subMenuDash: '–'
  },
  settings = $.extend( defaults, options ),
  el = $(this);
 
- this.each(function(){
+ // function to check if selector matches a list
+ function isList($this){
+ return $this.is('ul, ol');
+ }
+
+
+ // function to decide if mobile or not
+ function isMobile(){
+ return ($(window).width() < settings.switchWidth);
+ }
+
+
+ // check if dropdown exists for the current element
+ function menuExists($this){
+
+ // if the list has an ID, use it to give the menu an ID
+ if($this.attr('id')){
+ return ($('#mobileMenu_'+$this.attr('id')).length > 0);
+ } 
+
+ // otherwise, give the list and select elements a generated ID
+ else {
+ menuCount++;
+ $this.attr('id', 'mm'+menuCount);
+ return ($('#mobileMenu_mm'+menuCount).length > 0);
+ }
+ }
+
+
+ // change page on mobile menu selection
+ function goToPage($this){
+ if($this.val() !== null){document.location.href = $this.val()}
+ }
+
+
+ // show the mobile menu
+ function showMenu($this){
+ $this.hide('display', 'none');
+ $('#mobileMenu_'+$this.attr('id')).show();
+ }
+
+
+ // hide the mobile menu
+ function hideMenu($this){
+ $this.css('display', '');
+ $('#mobileMenu_'+$this.attr('id')).hide();
+ }
+
+ function createMenu($this){
  // ad class to submenu list
  el.find('ul').addClass(settings.subMenuClass);
 
  // Create base menu
  $('<select />',{
- 'class' : settings.className
+ 'class' : settings.className,
+ 'id' : 'mobileMenu_'+$this.attr('id')
  }).insertAfter( el );
 
  // Create default option
  $('<option />', {
- "value" : '#',
+ "value" : '#',
  "text" : settings.defaultText
  }).appendTo( '.' + settings.className );
 
  // Create select option from menu
  el.find('a').each(function(){
- var $this  = $(this),
- optText = '&nbsp;' + $this.text(),
+ var $this = $(this),
+ optText = '&nbsp;' + $this.text(),
  optSub = $this.parents( '.' + settings.subMenuClass ),
- len  = optSub.length,
+ len  = optSub.length,
  dash;
 
  // if menu has sub menu
@@ -52,7 +106,7 @@ $.fn.mobileMenu = function(options) {
 
  // Now build menu and append it
  $('<option />', {
- "value" : this.href,
+ "value" : this.href,
  "html" : optText,
  "selected" : (this.href == window.location.href)
  }).appendTo( '.' + settings.className );
@@ -67,9 +121,42 @@ $.fn.mobileMenu = function(options) {
  };
  });
 
- }); // End this.each
+ } // End this.each
+
+ // plugin functionality
+ function run($this){
+
+ // menu doesn't exist
+ if(isMobile() && !menuExists($this)){
+ createMenu($this);
+ }
+
+ // menu already exists
+ else if(isMobile() && menuExists($this)){
+ showMenu($this);
+ }
+
+ // not mobile browser
+ else if(!isMobile() && menuExists($this)){
+ hideMenu($this);
+ }
+
+ }
+
+ // run plugin on each matched ul/ol
+ // maintain chainability by returning "this"
+ return this.each(function() {
+
+ // cache "this"
+ var $this = $(this);
+
+ // bind event to browser resize
+ $(window).resize(function(){run($this);});
+
+ // run plugin
+ run($this);
 
- return this;
+ });
 
 };
 })(jQuery);