CSS3移动手机隐藏菜单UI界面设计

PetitQ 导航菜单 2019-1-24 2.22K 0 1

这是一款效果非常酷的 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>
```
```
        <div class="z"></div>
```
```
    </div>        
```
```
</div>  
```
```
</div>
```

CSS 样式

第一种隐藏菜单的滑动效果的 CSS 实现代码非常简单。整个菜单设置了固定的宽度和高度，并设置指定贝兹曲线的动画过渡效果。

```
div.menu {
```
```
  height: 568px; 
```
```
  width: 320px;
```
```
  margin-left:-190px;
```
```
  opacity:0;  
```
```
  position:relative;
```

  -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

     -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

      -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

       -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

          transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

```
}
```

在菜单按钮被点击的时候，背景图片会轻微的移动一些，制作出一点视觉差效果。

```
#menu-bg{
```
```
  position: absolute;
```
```
  left: -10px;
```
```
  top: -120px;  
```
```
  opacity: 0.3;
```

  -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

     -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

      -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

       -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

          transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

```
}
```
```
div.menu.animate #menu-bg{
```
```
    left:-23px;
```

  -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

     -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

      -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

       -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

          transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

```
}
```

菜单项使用 margin-left 值来制作动画效果，每一个菜单项都设置了不同的延迟时间，使它们有依次进入的效果。

div.menu ul{margin-top:110px;position:relative;}

```
div.menu ul li {
```
```
  list-style: none;
```
```
  width: 320px;
```
```
  margin-top: 40px;
```
```
  text-align: left;
```
```
  padding-left: 100px;
```
```
  font-size: 23px;
```
```
}
```
```
div.menu ul li a {
```
```
  color:#fff;
```
```
  text-decoration:none; 
```
```
  letter-spacing:1px; 
```
```
}
```
```
div.menu.animate ul li {
```
```
  margin-left:80px; 
```

  -webkit-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

     -moz-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

      -ms-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

       -o-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

          transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

```
}
```

div.menu.animate li:nth-of-type(1){transition-delay: 0.0s;}

div.menu.animate li:nth-of-type(2){transition-delay: 0.06s;}

div.menu.animate li:nth-of-type(3){transition-delay: 0.12s;}

div.menu.animate li:nth-of-type(4){transition-delay: 0.18s;}

div.menu.animate li:nth-of-type(5){transition-delay: 0.24s;}

另外在菜单按钮被点击的时候，屏幕层 screen 被推到屏幕的右边，这个效果通过修改它的 left 属性来完成。

```
div.screen{
```
```
  width:320px;
```
```
  height:560px; 
```
```
  overflow:hidden;
```
```
  position:absolute; 
```
```
  top:0px; 
```
```
  left:0px;
```
```
  background:#31558a;
```

  -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

     -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

      -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

       -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

          transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

```
}
```
```
div.screen.animate{
```
```
  left:254px;
```

  -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

     -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

      -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

       -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

          transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

```
}
```

其它两种效果的实现代码请参考下载文件。

CSS3 移动手机隐藏菜单 UI 界面设计

已有 554 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

CSS3移动手机隐藏菜单UI界面设计

HTML 结构

CSS 样式

CSS3 移动手机隐藏菜单 UI 界面设计

相关文章

纯CSS3菜单汉堡包按钮变形动画特效

紫色渐变CSS平滑过渡导航菜单栏

file explore - 简单的jquery目录树插件

发表回复取消回复

热销模板

导航菜单

HTML 结构

CSS 样式

CSS3 移动手机隐藏菜单 UI 界面设计

相关文章

发表回复 取消回复

热销模板

发表回复取消回复