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

 

下页