简要教程

这是一款非常实用的HTML5和CSS3 Material Design风格隐藏侧边栏网页布局模板。该模板设计简洁，侧边栏带动画效果，点击或触摸菜单项时会有点击波特效。该HTML5网页模板的特点有：

• 主菜单按钮带动画特效
• 菜单项在显示时带有动画特效
• 菜单项在点击或触摸时带有点击波特效
• 响应式设计

 制作方法

 HTML结构

该模板的侧边栏菜单的HTML结构如下：

<nav id="mm-menu" class="mm-menu">

<div class="mm-menu__header">     

<h2 class="mm-menu__title">Nick Salloum</h2>   

</div>   

<ul class="mm-menu__items">     

<li class="mm-menu__item">       <a class="mm-menu__link" href="#">         <span class="mm-menu__link-text"><i class="md md-home"></i> Home</span>       </a>     </li>     

<li class="mm-menu__item">       <a class="mm-menu__link" href="#">         <span class="mm-menu__link-text"><i class="md md-person"></i> Profile</span>       </a>     </li>     

<li class="mm-menu__item">       <a class="mm-menu__link" href="#">         <span class="mm-menu__link-text"><i class="md md-inbox"></i> Inbox</span>       </a>     </li>     

<li class="mm-menu__item">       <a class="mm-menu__link" href="#">         <span class="mm-menu__link-text"><i class="md md-favorite"></i> Favourites</span>       </a>     </li>     

<li class="mm-menu__item">       <a class="mm-menu__link" href="#">         <span class="mm-menu__link-text"><i class="md md-settings"></i> Settings</span>       </a>     </li>   

</ul>

</nav><!-- /nav -->               

 调用隐藏侧边栏菜单

你需要引入style.css和materialMenu.min.js文件。然后使用var menu = new Menu;方法来实例化一个新的侧边栏菜单即可。

<linkrel="stylesheet"href="css/style.min.css"><scriptsrc="js/materialMenu.min.js"></script>       

<script>varmenu = newMenu;</script>  

 浏览器兼容

• Chrome 39+
• Safari 8+
• Firefox 34+
• Internet Explorer 11