1 / 8
文档名称:

3种CSS3移动手机隐藏菜单UI界面设计源码.docx

格式:docx   大小:1,363KB   页数:8页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

3种CSS3移动手机隐藏菜单UI界面设计源码.docx

上传人:916581885 2021/7/17 文件大小:1.33 MB

下载得到文件列表

3种CSS3移动手机隐藏菜单UI界面设计源码.docx

相关文档

文档介绍

文档介绍: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(

最近更新