创建一个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'); 
   } 
  
})();

 

下页