素材牛VIP会员

Material Design风格手机App菜单特效

 所属分类:网页特效-导航菜单

 浏览:1590次  评论:1次  更新时间:2016-10-06
牛币素材VIP可免积分下载
Material Design风格手机App菜单特效兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:这是一款非常简单的Material Design风格手机App菜单特效。该特效使用CSS3和少量的jQuery代码来完成。在用户点击汉堡包菜单按钮之后,按钮会变形放大到整个手机APP屏幕,同时菜单选项会从屏幕下方滑动上来,效果非常酷。

详细介绍

使用方法:

引入jQuery库文件

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

插件初始化、参数配置

$('.nav-toggle').click(function () {
	    $('body').toggleClass('nav-open');
	});

引入CSS样式文件

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

HTML结构

该APP菜单的HTML结构使用嵌套<div>的HTML结构。导航菜单使用<nav>元素来制作。div.nav-toggle是用于制作圆形的扩展动画,div.icon是汉堡包图标。

<div class="phone">
  <div class="screen">
    <nav class="nav">
      <ul>
        <li><a href="#">搜 索<;/a></li>
        <li><a href="#">主 页<;/a></li>
        <li><a href="#">HTML5学习<;/a></li>
        <li><a href="#">CSS3学习<;/a></li>
        <li><a href="#">联系我们<;/a></li>
      </ul>
    </nav>
    <div class="nav-toggle">
      <div class="icon"></div>
    </div>
    <div class="lower-screen">
      <div class="card">
        <h2>Material cards</h2>
        <p>...</p>
      </div>
       
      <div class="card">
        <h2>..</h2>
        <p>...</p>
        </p>
      </div>
    </div>
  </div>
</div>

CSS样式解读

在这个APP节目设计中,手机的界面采用固定的宽度和高度,并设置为固定定位。手机的屏幕也设置了固定的宽度和高度,并设置为相对定位。

.phone {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 280px;
  height: 580px;
  border-radius: 40px;
  background-color: white;
}
.phone .screen {
  width: 260px;
  height: 450px;
  background-color: #ECEBE9;
  display: block;
  margin: 65px auto;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  border: 4px solid #262626;
}

汉堡包图标的包裹元素设置为一个半径30像素的圆形。它的:before伪元素设置为和它同样的大小,后面会使用这个伪元素来制作圆形扩展的动画效果。

.nav-toggle {
  width: 60px;
  height: 60px;
  z-index: 2;
  border-radius: 50%;
  margin: 10px;
  position: absolute;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
}
.nav-toggle:before {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #4A75E6;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
}

在用户点击了汉堡包图标之后,特效中使用jQuery代码来为body元素切换class,当body元素被添加了.nav-openclass之后,.nav-toggle:before伪元素开始动画,圆形开始扩展。

body.nav-open .nav-toggle:before {
  width: 1200px;
  height: 1200px;
  background-color: rgba(74, 117, 230, 0.95);
}

相关素材 - 导航菜单

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

古***场  
2019年09月03日

有点单调

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)