当前位置：首页 > 网站模板 > 后台模板

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

分类：后台模板日期：2024-05-14 点击(5) 评论(0)

简介

##### HTML结构
该模板的侧边栏菜单的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>     
```          
 调用隐藏侧边栏菜单
你需要引入style.css和materialMenu.min.js文件。然后使用var menu = new Menu;方法来实例化一个新的侧边栏菜单即可。

```html
<link rel="stylesheet" href="css/style.min.css">
<script src="js/materialMenu.min.js"></script>                
<script>
  var menu = new Menu;
</script>  
```

web299.com

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

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面