How to create a mmenu
First include jQuery and the jQuery.mmenu-plugin files in your webpage:
<head> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.mmenu.js"></script> <link type="text/css" rel="stylesheet" media="all" href="mmenu.css" /> </head>
Optionally, you can include the mmenu-widescreen.css file to always have the menu opened on wider screens, use media-queries to specify the minimum width:
<link type="text/css" rel="stylesheet" media="all and (min-width: 900px)" href="mmenu-widescreen.css" />
Optionally, you can include the mmenu-sizing-large.css file for larger buttons:
<link type="text/css" rel="stylesheet" href="mmenu-sizing-large.css" />
Optionally, you can include the mmenu-theme-light.css file for a light color theme:
<link type="text/css" rel="stylesheet" href="mmenu-theme-light.css" />
If you want to customize the colors of your menu, all you need to do is change its background-color:
#my-menu {
background-color: #322;
}
Next up: The page »