优美的移动端菜单特效

模仿大疆官网效果图：

点击前

点击后：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0rpx;
padding: 0rpx;
font-family: "Microsoft YaHei";
font-size: 16px;
}
a{
text-decoration: none;
}
.left{
float: left;
}
.right{
float: right;
}
.clear{
clear: both;
}
.mHeader{
position: fixed;
height: 50px;
z-index: 100;
width: 100%;
background: black;
top: 0px;
left: 0px;
}
.mIcon{
width: 50px;
height: 50px;
padding: 3px 10px;
position: fixed;
z-index: 100;
}
.controlIcon{
display: block;
width: 35px;
height: 3px;
margin-top: 8px;
margin-bottom: 8px;
transition: all .4s ease;
background: #dde1e4;
}
.mIconActive .controlIcon:nth-child(1){
animation: 0.5s ease-out forwards animate1;
-webkit-animation: 0.5s ease-out forwards animate1;
}
.mIconActive .controlIcon:nth-child(2){
opacity: 0;
}
.mIconActive .controlIcon:nth-child(3){
animation: 0.5s ease-out forwards animate2;
-webkit-animation: 0.5s ease-out forwards animate2;
}
.mIconClose .controlIcon:nth-child(1){
animation: 0.5s ease-out forwards animate3;
-webkit-animation: 0.5s ease-out forwards animate3;
}
.mIconClose .controlIcon:nth-child(2){
opacity: 1;
}
.mIconClose .controlIcon:nth-child(3){
animation: 0.5s ease-out forwards animate4;
-webkit-animation: 0.5s ease-out forwards animate4;
}
@-webkit-keyframes animate1{
0%{
-webkit-transform:rotate(0deg) translateY(0px);
}
100%{
-webkit-transform:rotate(45deg) translateY(8px) translateX(8px);
}
}
@keyframes animate1{
0%{
transform:rotate(0deg) translateY(0px);
}
100%{
transform:rotate(45deg) translateY(8px) translateX(8px);
}
}
@-webkit-keyframes animate2{
0%{
-webkit-transform:rotate(0deg) translateY(0px);
}
100%{
-webkit-transform:rotate(-45deg) translateY(-8px) translateX(8px);
}
}
@keyframes animate2{
0%{
transform:rotate(0deg) translateY(0px);
}
100%{
transform:rotate(-45deg) translateY(-8px) translateX(8px);
}
}
@-webkit-keyframes animate3{
0%{
-webkit-transform:rotate(45deg) translateY(8px) translateX(8px);
}
100%{
-webkit-transform:rotate(0deg) translateY(0px);
}
}
@keyframes animate3{
0%{
transform:rotate(45deg) translateY(8px) translateX(8px);
}
100%{
transform:rotate(0deg) translateY(0px);
}
}
@-webkit-keyframes animate4{
0%{
-webkit-transform:rotate(-45deg) translateY(-8px) translateX(8px);
}
100%{
-webkit-transform:rotate(0deg) translateY(0px);
}
}
@keyframes animate4{
0%{
transform:rotate(-45deg) translateY(-8px) translateX(8px);
}
100%{
transform:rotate(0deg) translateY(0px);
}
}
.mLogo{
width: 104px;
height: 26px;
margin: 10px auto;
position: relative;
z-index: 10;
}
.mLogo img{
width: 104px;
height: 26px;
}
.mMenu{
position: fixed;
top: 0px;
padding-top: 50px;
background: black;
z-index: 9;
width: 100%;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.mMenu ul{
padding-left: 0px;
}
.mMenu ul li a{
display: block;
height: 50px;
line-height: 50px;
color: #dde1e4;
text-decoration: none;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="mHeader hidden-lg hidden-md">
<div class="mIcon left">
<span class="controlIcon"></span>
<span class="controlIcon"></span>
<span class="controlIcon"></span>
</div>
<div class="mLogo">
<a href="index.html"><img src="data:images/bottomlogo.png" /></a>
</div>
<div class="mMenu clear">
<ul>
<li><a href="aboutus.html">公司简介</a></li>
<li><a href="product.html">产品介绍</a></li>
<li><a href="case.html">客户案例</a></li>
<li><a href="team.html">团队介绍</a></li>
<li><a href="newsList.html">新闻中心</a></li>
<li><a href="contactus.html">联系我们</a></li>
<li><a href="recruit.html">招募精英</a></li>
</ul>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//移动端菜单
$(".mMenu").hide();
$(".mIcon").click(function(){
if($(this).hasClass("mIconActive")){
$(this).removeClass("mIconActive").addClass("mIconClose");
$(".mMenu").show().slideUp();
}else{
$(this).removeClass("mIconClose").addClass("mIconActive");
$(".mMenu").hide().slideDown();
}
});
</script>
</html>

优美的移动端菜单特效相关推荐

Cocos2d-X中实现菜单特效
Cocos2d-X中能够讲菜单和动作结合起来使用实现菜单特效程序实例1:使用菜单和动作的组合实现菜单特效<一> #include "MenuItem.h"CCScen ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...
一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
php左右菜单,JQuery实现左右滚动菜单特效_jquery
经过了半天的时间,这个使用JQuery开发出来的左右滚动菜单功能也算是完成了,暂时还没有发现错误的现象.现在把代码完整的代码拿出来分享! scrollable.js JQuery左右滚动菜单特效脚本代 ...
js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件常见触屏事件: 触屏touch事件说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
移动端、PC端网页特效
移动端网页特效标题触屏事件移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...
CSS3实现扇形动画菜单特效
CSS3实现扇形动画菜单特效 CSS3实现扇形动画菜单特效效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><me ...

优美的移动端菜单特效

优美的移动端菜单特效相关推荐

最新文章

热门文章