文档介绍:3种CSS3移动手机隐藏菜单UI界面设计源码
3种CSS3移动手机隐藏菜单UI界面设计源码
这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计。这个UI设计共有三种不同的打开隐藏菜单的效果,分别为滑动显示,Material Design风格效果和展开式效果。
使用方法
HTML结构
这三种不同的隐藏菜单的HTML结构大致基本相同。第一种滑动效果菜单的HTML结构如下:
<div class="screen">
  <div class="navbar"></div>
  <div class="list">
      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>              
      </div>
      
      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>              
      </div>
      
      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>              
      </div>
      
      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>              
      </div>
  </div>                   
              
  <div class="burger">
      <div class="x"></div>
      <div class="y"></div>
在菜单按钮被点击的时候,背景图片会轻微的移动一些,制作出一点视觉差效果。
#menu-bg{
  position: absolute;
  left: -10px;
  top: -120px;  
  opacity: ;
  -webkit-transition: all 500ms cubic-bezier(, , , );
    -moz-transition: all 500ms cubic-bezier(, , , );
    -ms-transition: all 500ms cubic-bezier(