Home > Features > Dev Depot: Mmenu, Sliding Menus With a Single Line of Code • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Mmenu, Sliding Menus With a Single Line of Code

Dev Depot: Mmenu, Sliding Menus With a Single Line of Code

July 3, 2014
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 143 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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.

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.


Studio 20 Owner Plants Roots in California

This past summer, live cam brand Studio 20 planted roots in North American with a production facility in Hollywood, Calif. It’s a remarkable studio that houses 14 sets where glamour cam models provide... More »

Clean Light Labs President Carrie Martz Discusses Uvee Sanitizing System

Clean Light Laboratories has come up with a UVC light system, the Uvee, designed to kill up to 99 percent of infection-causing germs, and scientifically tested by a master biochemist. Carrie Martz, who... More »

WIA Profile: Samantha Brown

Each month, industry news media organization XBIZ spotlights the career accomplishments and outstanding contributions of Women in Adult. WIA profiles offer an intimate look at the professional lives of... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.

Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /data/SFTP/xbizid/incoming/web/www/app/inc/proc.init.php on line 5
Access the latest issues of the industry's leading trade publications in digital form. View online or download for offline viewing.



Oct 05 - Oct 07
Hannover, Germany


Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!