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