Material Design隐藏侧边栏网页布局模板

这是一款非常实用的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;方法来实例化一个新的侧边栏菜单即可。

<link rel="stylesheet" href="css/style.min.css">
<script src="js/materialMenu.min.js"></script>                
              

<script>
  var menu = new Menu;
</script>               
              

浏览器兼容

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