商务商城

网页设计素材

作者:admin 发布时间:2020-12-29

网页设计素材:Material Design隐藏侧边栏网页布局模板

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

主菜单按钮带动画特效 菜单项在显示时带有动画特效 菜单项在点击或触摸时带有点击波特效 响应式设计 制作方法 HTML结构

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

 nav id="mm-menu" 
 div 
 h2 Nick Salloum /h2 
 /div 
 a href="#" 
 span i /i Home /span 
 /li 
 a href="#" 
 span i /i Profile /span 
 /li 
 a href="#" 
 span i /i Inbox /span 
 /li 
 a href="#" 
 span i /i Favourites /span 
 /li 
 a href="#" 
 span i /i Settings /span 
 /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

收缩