diff --git a/jquery.mobilemenu.js b/jquery.mobilemenu.js
index ef2ec18..742e7f7 100644
--- a/jquery.mobilemenu.js
+++ b/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://github.com/mambows/mobilemenu
+ * http://github.com/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
$('',{
- 'class' : settings.className
+ 'class' : settings.className,
+ 'id' : 'mobileMenu_'+$this.attr('id')
}).insertAfter( el );
// Create default option
$('', {
- "value" : '#',
+ "value" : '#',
"text" : settings.defaultText
}).appendTo( '.' + settings.className );
// Create select option from menu
el.find('a').each(function(){
- var $this = $(this),
- optText = ' ' + $this.text(),
+ var $this = $(this),
+ optText = ' ' + $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
$('', {
- "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);
\ No newline at end of file