Permalink
Browse files

initial commit

  • Loading branch information...
1 parent 7413dd7 commit df2360be2c6e5fa9681e91a1b37e3ab3a45539c8 @mattkersley committed Aug 14, 2011
Showing with 204 additions and 0 deletions.
  1. +12 −0 README
  2. +42 −0 index.html
  3. +150 −0 jquery.mobilemenu.js
View
12 README
@@ -0,0 +1,12 @@
+This is a simple jQuery plugin to convert menus into a select element for mobile devices and low browser widths.
+
+usage:
+$(document).ready(function(){
+
+ $('ul#id').mobileMenu({
+ switchWidth: 768, //width (in px to switch at)
+ topOptionText: 'Select a page', //first option text
+ indentString: '   ' //string for indenting nested items
+ });
+
+});
View
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Page Title</title>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+ <script src="jquery.mobilemenu.js"></script>
+ <script>
+ $(document).ready(function(){
+ $('#test').mobileMenu();
+ });
+ </script>
+</head>
+<body>
+ <ol id="test">
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a>
+ <ul>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a>
+ <ol>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ </ol>
+ </li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ </ul>
+ </li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+ <li><a href="test">test</a></li>
+
+ </ol>
+</body>
+</html>
View
@@ -0,0 +1,150 @@
+(function($){
+
+ //variable for storing the menu count when no ID is present
+ var menuCount = 0;
+
+ //plugin code
+ $.fn.mobileMenu = function(options){
+
+ //plugin's default options
+ var settings = {
+ switchWidth: 768,
+ topOptionText: 'Select a page',
+ indentString: '&nbsp;&nbsp;&nbsp;'
+ };
+
+
+ //function to check if selector matches a list
+ function isList($this){
+ return (($this.is('ul, ol')) ? true : false);
+ }
+
+
+ //function to decide if mobile or not
+ function isMobile(){
+ return (($(window).width() < settings.switchWidth) ? true : false);
+ }
+
+
+ //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) ? true : false);
+ }
+
+ //otherwise, give the list and select elements a generated ID
+ else {
+ menuCount++;
+ $this.attr('id', 'mm'+menuCount);
+ return (($('#mobileMenu_mm'+menuCount).length > 0) ? true : false);
+ }
+ }
+
+
+ //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();
+ $('#mobileMenu_'+$this.attr('id')).show();
+ }
+
+
+ //hide the mobile menu
+ function hideMenu($this){
+ $this.show();
+ $('#mobileMenu_'+$this.attr('id')).hide();
+ }
+
+
+ //create the mobile menu
+ function createMenu($this){
+ if(isList($this)){
+
+ //generate select element as a string to append via jQuery
+ var selectString = '<select id="mobileMenu_'+$this.attr('id')+'" class="mobileMenu">';
+
+ //create first option (no value)
+ selectString += '<option value="">'+settings.topOptionText+'</option>';
+
+ //loop through list items
+ $this.find('li').each(function(){
+
+ //when sub-item, indent
+ var levelStr = '';
+ var len = $(this).parents('ul, ol').length;
+ for(i=1;i<len;i++){levelStr += settings.indentString;}
+
+ //get url and text for option
+ var link = $(this).find('a:first-child').attr('href');
+ var text = levelStr + $(this).clone().children('ul, ol').remove().end().text();
+
+ //add option
+ selectString += '<option value="'+link+'">'+text+'</option>';
+ });
+
+ selectString += '</select>';
+
+ //append select element to ul/ol's container
+ $this.parent().append(selectString);
+
+ //add change event handler for mobile menu
+ $('#mobileMenu_'+$this.attr('id')).change(function(){
+ goToPage($(this));
+ });
+
+ //hide current menu, show mobile menu
+ showMenu($this);
+ } else {
+ alert('mobileMenu will only work with UL or OL elements!');
+ }
+ }
+
+
+ //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() {
+
+ //override the default settings if user provides some
+ if(options){$.extend(settings, options);}
+
+ //cache "this"
+ var $this = $(this);
+
+ //bind event to browser resize
+ $(window).resize(function(){run($this);});
+
+ //run plugin
+ run($this);
+
+ });
+
+ };
+
+})(jQuery);

0 comments on commit df2360b

Please sign in to comment.