创建一个HTMl5 Material设计模板
Material设计(材料设计)是由谷歌开发的一套设计标准,特点是在二维平面上因为阴影出现浮动印象, 抽象地说,触觉表面,大胆的平面设计,流体运动。
本文主要是帮助你理解如何创建一个材料设计的应用,包括一些著名的元素如action button已经在安卓应用中非常流行,而阴影的使用能给你的页面一种材料的感觉,side-bar也是相当完美。
我们基于材料设计原理创建的一个HTML5 模板,你能在你自己任何项目中使用这个起步的布局,它是基于flexbox,所以非常简单和容易,但是需要考虑到旧版本浏览器的不兼容性。这个模板是响应式responsive的,能够在任何屏幕大小工作。
这个模板的可视效果如下,在桌面和手机上的不同显示效果:
这个模板包含Html和CSS以及一点点不复杂的Javascript。
HTML
下面是模板布局的各个区域定义:
├── header |---------.primary-header-content |---------.secondary-header-content
├── .side-bar |---------.side-bar-primary-area |---------.side-bar-nav
├── role='main' |---------.secondary-search-area |---------.action-wrapper
├── .overlay
header表示头部:代表页面顶部蓝色条块,被划分为两个区域,第一个包含菜单icon和标题,第二个包含main navigation(内容导航)和搜索区域search area。
.side-bar:这是代表在移动模型下的侧栏,用户在侧栏中能够点击菜单,也被分为两个区域,第一个是primary area,用户侧栏的头部,其他是用于内容导航的navigation items。
role="main":这是主要内容显示区域,包含两个子元素,第一个是"secondary search area",放置搜索盒的地方,注意是在移动布局情况下。action-wrapper则是用来做action-button的包装器名称。
overlay:当用户激活侧栏时,会用一个半透明的黑色填充整个屏幕,这就是覆盖效果。
整个页面代码如下:
<!DOCTYPE html><html lang ="zh ">
<head >
<meta charset ="UTF-8 " />
<meta name ="viewport " content ="width =device-width, maximum-scale =1.0, minimum-scale =1.0, initial-scale =1.0 " />
<link href ="https://fonts.googleapis.com/icon?family =Material+Icons " rel ="stylesheet ">
<link href ='https://fonts.googleapis.com/css?family =Roboto ' rel ='stylesheet ' type ='text/css '>
<title >
HTML5 responsive flexbox template
</title ></head >
<body >
<header >
<div class ='primary-header-content '>
<i class ='menu-icon material-icons '>
menu
</i >
<h1 >
HTML5
<sub >template
</sub ></h1 >
</div >
<div class ='secondary-header-content '>
<nav >
<ul >
<li ><i class ='material-icons '>
home
</i >Home
</li >
<li ><i class ='material-icons '>
explore
</i >Explore
</li >
<li ><i class ='material-icons '>
info
</i >About
</li >
</ul >
</nav >
<div class ='search-area '>
<input type ="text " name ='search ' class ='search ' placeholder ="Search... "/>
<i class ='material-icons '>
search
</i >
</div >
</div >
</header >
<div class ='side-bar '>
<div class ='side-bar-primary-area '></div >
<nav >
<ul class ='side-bar-nav '>
<li ><i class ='material-icons '>
home
</i >Home
</li >
<li ><i class ='material-icons '>
explore
</i >Explore
</li >
<li ><i class ='material-icons '>
info
</i >About
</li >
</ul >
</nav >
</div >
<div role ='main '>
<div class ='secondary-search-area '></div >
<div class ='action-wrapper '>
<button class ='primary-button action-button '></button >
<div class ='sub-button-wrapper '>
<button class ='secondary-button action-button '>
<i class ='material-icons '>
add_alert
</i >
</button >
<button class ='secondary-button action-button '>
<i class ='material-icons '>
timeline
</i >
</button >
<button class ='secondary-button action-button '>
<i class ='material-icons '>
attachment
</i >
</button >
</div >
</div >
</div >
<div class ='overlay '></div >
</body >
</html >
Javascript
js在这里很简单,只是增加事件到menu-button,当点击侧栏时,它显示侧栏side-bar;当点击内容元素时,会隐藏侧栏side-bar
(function(){var
menuElement
=document
.querySelector('header .menu-icon');var
bodyElement
=document
.querySelector('body');bodyElement
.onclick
=function(
e
){document
.querySelector('.side-bar').classList
.remove('side-bar-visible');document
.querySelector('.overlay').classList
.remove('visible');}
menuElement
.onclick
=function(
e
){e
.preventDefault();e
.stopPropagation();document
.querySelector('.side-bar').classList
.add('side-bar-visible');document
.querySelector('.overlay').classList
.add('visible');}
})();