Include plugin file into Your website.
<script type="text/javascript" src="materialmenu.jquery.js"></script>
Include plugin file into Your website.
<script type="text/javascript" src="materialmenu.jquery.js"></script>
Place belowed menu button in Your HTML. Click this button to open menu on mobile device.
<div class="material-menu-button"> <span></span> <span></span> <span></span> </div>
Create new or copy bolowed CSS, to style Your menu and menu-button.
/** On desktop, we do not need to show menu button */ .material-menu-button { display:none; } /** Menu in mobile-view */ @media only screen and (max-width: 767px) { /** Button styling */ .material-menu-button { display:block; width:50px; height:45px; padding:10px 10px 0px 10px; background-color:#000; } .material-menu-button span { display:block; width:100%; height:5px; margin-bottom:4px; background-color:#fff; } .material-menu-wrapper { padding:20px; } .material-menu-view-mobile { background-color:#fff; -webkit-box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2); box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2); } /** Titlebar */ .material-menu-titlebar { -webkit-box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2); box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2); } }
Plugin must be called on UL element. It wraps UL into DIV with class .material-menu-wrapper
. When is mobile view, plugin add to the NAV element ($(this).parent().parent()
) class named .vertical
for styling in vertical mode, but You can change what plugin does in mobile view, by providing Your own function for option onChangeMobile: function() {}
.
$('.material-menu nav > ul').materialmenu();
Belowed code:
<div class="material-menu"> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about.html">About us</a></li> <li><a href="/contact.html">Contact</a></li> </ul> </nav> </div>
Will be converted into this:
<div class="material-menu"> <nav> <div class="material-menu-wrapper material-menu-view-desktop" style="some:style;"> <ul> <li><a href="/">Home</a></li> <li><a href="/about.html">About us</a></li> <li><a href="/contact.html">Contact</a></li> </ul> </div> </nav> </div>
And in mobile view, will looks like this:
<div class="material-menu"> <nav class="vertical"> <div class="material-menu-wrapper material-menu-view-mobile" style="some:style;"> <ul> <li><a href="/">Home</a></li> <li><a href="/about.html">About us</a></li> <li><a href="/contact.html">Contact</a></li> </ul> </div> </nav> </div>