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

当前位置:主页 > Html5库 > HTML5模板 > Material Design隐藏侧边栏网页布局模板
Material Design隐藏侧边栏网页布局模板
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-08-02
    阅读:
简要教程

这是一款非常实用的HTML5CSS3 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