Sliding menus are all the rage these days and are an integral component of responsive website designs, where stuffing robust navigational options into a mobile friendly form factor is needed. What is also needed is a lightweight way to implement this menu type.
According to its publisher, Mmenu (mmenu.frebsite.nl) allows users to create sliding menus with only a single line of code, through a fully responsive and customizable CSS framework generated with SCSS; a scripting language for generating quality style sheets.
Mmenu allows users to create sliding menus with only a single line of code, through a fully responsive and customizable CSS framework generated with SCSS.
Using Mmenu is more straightforward than many competitive sliding menu scripts.
Sliding panels are as easy to create as menus, which can be positioned along the top, bottom, left or right, at the back, front or next to the page. Optional sliding horizontal or expanding vertical submenus are available, while menus can also be optionally opened when dragging the page out of the viewport.
Mmenu plays nicely with jQuery Mobile, which is fortunate, as mobile users will be among those that benefit the most from these sliding menus, which allow many choices in content and navigation, easily accessible, but packed in the smallest space possible.
Filled with options for customizing the menus, Mmenu enables coders to quickly add headers, labels, counters and even a search field, while simple theme modifications such as changing the background color and other properties is a snap.
Mmenu is compatible with all major browsers and is really easy to use. First include jQuery and the jQuery.mmenu plugin files in to the desired webpage and then setup the menu as one normally would using HTML — by creating a basic unordered list (<UL>), with nested line items (<LI>’s) inside a NAV DIV.
Once the HTML is prepared and the scripts included, call the Mmenu plugin through the onDocumentReady command, using a bit of simple jQuery:
$(“#nav”).mmenu({ // options go here... });
The Mmenu plugin provides useful default option values that can be overridden by passing new values to the method. For example, by default, the menu will fill 80 percent of the available width (or height when opened from the top or bottom), with a min-width of 140px and a max-width of 440px. Of course these values can be changed by creating a custom SCSS file and then using @include to call the sizing function.
The script also automatically adds links for opening and closing any submenus, while fixed page headers and footers, along with custom list item and label text white-spacing, and more, are all possible with Mmenu flexible setup options.
The publisher notes that users probably won’t need to make changes to their page’s HTML, but advises coders to contain a page’s entire markup with only one wrapper DIV, without explicitly specifying the border, margin, padding and width of this wrapper.
Other HTML container elements can be used, but they must be specified within the pageNodetype option in the script’s configuration for everything to work correctly.