Short for 'Mobile Menu', this is a tiny jQuery plugin I built as a drop-in solution for adding a simple menu for responsive and mobile-based websites. It essentially clones your main navigation unordered list into the #mobileMenu
container and creates a mobile menu on the fly.
If your navigation is within a container, you can specify the container as the selector, or you can specify the navigation ul
itself. In your design, add the 'mobileMenu' container towards the top of your page. It will automatically appear as fixed to the top of the page, so container placement isn't as crucial.
This defaults to #mobileMenu
but you can define your own container id instead.
<div id="mobileMenu"></div>
Your nav container as the selector
$('nav').moMenu();
or the navigation ul
itself as the selector
$('#menu').moMenu();
With optional parameters defined
$('#menu').moMenu({
nocontainer: true,
container: '#your-mobile-menu-container-id',
speed: 300,
theme: 'light'
});
NEW: Menu type parameter
$('#menu').moMenu({
type: 'slide',
nocontainer: true,
container: '#your-mobile-menu-container-id',
speed: 300,
theme: 'light'
});
I've included some simple options for minimal customization. I also plan on adding color themes that can be defined as a parameter as well. Currently supported:
- nocontainer: This defaults to false. If set to true, it will treat your navigation menu ul as the primary selector, as opposed to automatically grabbing the ul within a
nav
container or adiv
. Handy if your main navigation ul is not wrapped in anything. - container: This defaults to
#mobileMenu
but if you prefer to use a different id for the container that your mobile menu will be rendered in, you can specify it. - speed: This is the speed of the slide up/down animation of the menu when the mobile menu button is clicked. It defaults to
600
but you can define a custom speed in milliseconds. - auto: If you don't want to manually add the
#mobileMenu
div to your markup, setting theauto
option to true will automatically prepend the Mo Menu container to the body. This makes the plugin completely hands off. - theme: There are currently 2 themes to pick from: the default (black) one and a 'light' generic style. If you decide to roll your own theme, you can define its class in the
theme
attribute and the plugin will render the class as.moMenu-yourclassname
. - zindex: Now you can set the
z-index
of the menu. - animation: There are 2 choices for the animation style:
toggle
andslideToggle
. The menu automatically defaults toslideToggle
but if you would prefer the menu to appear immediately without animation,toggle
will make it happen. - type: This is a big one. Want a mobile menu that slides out from the left instead of down from the top? Now it's possible. Simply add
type: 'slide'
to your moMenu call and you're done. View the demo video
The Mo' Menu script will do the rest. It will copy your main navigation into the mobileMenu container, format it all nicely and be completely accessible for mobile users.
I've set the menu up to automatically detect browser width on the fly via the jQuery resize()
function but haven't tested this in the wild yet. It works properly in my demo but mileage may vary for other applications. This functionality will detect browser window width and set the top-padding of the body to either the default (40px) value or to the value that you explicitly set via the padding
option mentioned above in the options section. When the browser is resized to something other than assumed mobile width, it will reset the top-padding of the body tag to whatever was originally applied to it (if anything). The method to accomplish this is somewhat primitive but it works. I'm sure it could be written better.
This is still a beta feature and has not been thoroughly tested. If you encounter any issues, please let me know or tinker with my code and submit a bug fix. I love feedback. The code will still work perfectly without the type
variable defined.
© 2012, Daryn St. Pierre — bloqhead.com
Released under the WTFPL License.