{"id":19681,"date":"2014-03-27T13:01:35","date_gmt":"2014-03-27T05:01:35","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19681"},"modified":"2025-04-04T01:43:13","modified_gmt":"2025-04-03T17:43:13","slug":"jquery-mmenu-sliding-menu","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/","title":{"rendered":"Creating Sliding Menu With Ease Using jQuery.mmenu"},"content":{"rendered":"

Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by searching other inspirational menu design<\/a> or with the help of tools. In this matter, jQuery.Mmenu<\/strong> comes in as a pretty handy tool.<\/p>\n

jQuery.Mmenu<\/a> is an easy-to-use jQuery plugin for creating mobile app sliding navigation menu<\/strong> in your website. This slick creative menu will bring a nicer and neatere user experience.<\/p>\n

Getting Started<\/h2>\n

To get started with jQuery.Mmenu<\/strong>, head over to the download page<\/a> and the plugin will be downloaded automatically. In this post, we will try to build a basic menu.<\/p>\n

Just like other jQuery plugins, to use this you have to include the required dependencies to your site. Those are jQuery, jquery.mmenu.js and jquery.mmenu.css<\/strong>. The snippet is as follows:<\/p>\n

\r\n<head>\r\n..\r\n   <link type=\"text\/css\" rel=\"stylesheet\" href=\"jquery.mmenu.css\" \/>\r\n   <script type=\"text\/javascript\" src=\"jquery.js\"><\/script>\r\n   <script type=\"text\/javascript\" src=\"jquery.mmenu.js\"><\/script>\r\n..   \r\n<\/head>\r\n<\/pre>\n
And that should be enough for creating a basic menu with all functionalities and styling<\/strong>. For more advanced and extra features, you need to include additional JS and CSS file<\/strong>.<\/p>\n
Creating A Menu<\/h2>\n
Let\u2019s create the basic menu as you usually create it with the nav<\/code>, ul<\/code>, li<\/code> and a<\/code> elements. In this demo, we\u2019ll create a horizontal menu that has three sub-menus and also three sub-sub-menus, like so.<\/p>\n
\r\n<nav id=\"menu\">\r\n   <ul>\r\n     <li class=\"Selected\">\r\n         <a href=\"demo.html\">Basic Horizontal Menu<\/a>\r\n         <ul>\r\n             <li><a href=\"#\">First sub-menu<\/a><\/li>\r\n             <li><a href=\"#\">Second sub-menu<\/a>\r\n                 <ul>\r\n                     <li><a href=\"#\">First sub-sub-menu<\/a><\/li>\r\n                     <li><a href=\"#\">Second sub-sub-menu<\/a><\/li>\r\n                     <li><a href=\"#\">Third sub-sub-menu<\/a><\/li>\r\n                 <\/ul>\r\n             <\/li>\r\n             <li><a href=\"#\">Third sub-menu<\/a><\/li>\r\n         <\/ul>\r\n     <\/li>\r\n   <\/ul>\r\n<\/nav>\r\n<\/pre>\n
In the above menu, we have included the nav with a menu<\/code> id which will be used as the jQuery.mmenu function reference. Then call the plugin with the javascript function and include the id like so.<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $('nav#menu').mmenu();\r\n  });\r\n<\/script>\r\n<\/pre>\n
In the LI tag, you can see a class named Selected<\/code>, this class is useful to make the default selected menu upon  initialization. You also may add your own class (for example \u201cactive\u201d), but make sure to include it in the configuration section<\/strong>, like so.<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $('nav#menu').mmenu({\r\n      \/\/ options object\r\n    }, {\r\n      \/\/ configuration object\r\n      selectedClass: \"active\"\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
This plugin has automatically added<\/strong> the sub-menu closing and opening links, so we don\u2019t need to create them. Our menu should look like this.<\/p>\n
\"menu<\/figure>\n
Conclusion<\/h2>\n
jQuery.mmenu offers you a great solution to create different menus as easy as possible. You can even create other interactive elements<\/strong> with this plugin, for example, you can create a sliding tooltip and notification bar for mobile site.<\/p>\n
jQuery.Mmenu<\/strong> can be customized for advance usage as well. For example, you can create a mobile-like contact list in your site by combining its theme sextension, addon (labels, counters, header, dragOpen and searchfield) and positioning.<\/p>","protected":false},"excerpt":{"rendered":"
Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by searching other inspirational menu design or with the help of tools. In this matter, jQuery.Mmenu comes in as a pretty handy tool. jQuery.Mmenu is an easy-to-use jQuery plugin for…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCreating Sliding Menu With Ease Using jQuery.mmenu - Hongkiat<\/title>\n<meta name=\"description\" content=\"Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Sliding Menu With Ease Using jQuery.mmenu\" \/>\n<meta property=\"og:description\" content=\"Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-27T05:01:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:43:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-mmenu-sliding-menu\/menu-result.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Creating Sliding Menu With Ease Using jQuery.mmenu\",\"datePublished\":\"2014-03-27T05:01:35+00:00\",\"dateModified\":\"2025-04-03T17:43:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/\"},\"wordCount\":396,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-mmenu-sliding-menu\\\/menu-result.jpg\",\"keywords\":[\"jQuery\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/\",\"name\":\"Creating Sliding Menu With Ease Using jQuery.mmenu - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-mmenu-sliding-menu\\\/menu-result.jpg\",\"datePublished\":\"2014-03-27T05:01:35+00:00\",\"dateModified\":\"2025-04-03T17:43:13+00:00\",\"description\":\"Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-mmenu-sliding-menu\\\/menu-result.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-mmenu-sliding-menu\\\/menu-result.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-mmenu-sliding-menu\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Sliding Menu With Ease Using jQuery.mmenu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Sliding Menu With Ease Using jQuery.mmenu - Hongkiat","description":"Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/","og_locale":"en_US","og_type":"article","og_title":"Creating Sliding Menu With Ease Using jQuery.mmenu","og_description":"Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-03-27T05:01:35+00:00","article_modified_time":"2025-04-03T17:43:13+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-mmenu-sliding-menu\/menu-result.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Creating Sliding Menu With Ease Using jQuery.mmenu","datePublished":"2014-03-27T05:01:35+00:00","dateModified":"2025-04-03T17:43:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/"},"wordCount":396,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-mmenu-sliding-menu\/menu-result.jpg","keywords":["jQuery"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/","name":"Creating Sliding Menu With Ease Using jQuery.mmenu - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-mmenu-sliding-menu\/menu-result.jpg","datePublished":"2014-03-27T05:01:35+00:00","dateModified":"2025-04-03T17:43:13+00:00","description":"Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-mmenu-sliding-menu\/menu-result.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-mmenu-sliding-menu\/menu-result.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-mmenu-sliding-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Sliding Menu With Ease Using jQuery.mmenu"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-57r","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19681"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19681\/revisions"}],"predecessor-version":[{"id":73667,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19681\/revisions\/73667"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19681"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}