Very Small Mobile Menu is a Javascript script that turns an UL/LI hover menu into something that works well on mobile devices.

Example of Current Menu Format with HTML

   <div id="nav">
      <ul>
         <li>
            <a href="#">Some Stuff</a>
               <ul>
                  <li><a href="#">More Stuff</a></li>
                  <li><a href="#">Even More Stuff</a></li>
               </ul>
            <a href="#">Eh</a>
         </li>
      </ul>
    </div>

Example of Current Menu Format after using Very Small Mobile Menu

Implementing Very Small Mobile Menu

Very Small Mobile Menu is very simple to implement. You will need to obtain the code from below and then do some Javascript linking. Very Small Mobile Menu does require jQuery.

Javascript
				
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script src="vsmm.js"></script>
			
CSS
	
	.vsmm_nav {
		display: none;
	}

	@media (max-width: 750px) {

		.nav {
			display: none;
		}
		
		.vsmm_nav {
			display: block;
		}
	}
			
HTML
				
	<script>
		vsMobileMenu("nav", {});
		
		// or, using optional arguments
		
		vsMobileMenu("nav", {text : "MENU", position : "under", icon : "images/icon.png"})
	</script>	
			

There are a few optional classes to modify using CSS, they are vsmm_menu, vsmm_submenu, and vsmm_link.

There are also optional arguments that can be passed to VSMM. These are:

Get Very Small Mobile Menu v1.3