做一个响应式前台页面的时候需要这样的功能,下面的代码实现三 → X 动画同时弹出侧边栏 ,只是提供一个思路 ,个人练习还未运用到项目所以也还未包含响应式。
演示:
代码如下:
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试三条线变叉的动画</title>
<script src="./plugins/jquery/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #2ecc71;
}
/* 整个 三/X 绝对定位到右上角 author: yincaiTA */
.i-nav-toggle {
position: fixed;
top: 11px;
right: 15px;
z-index: 1000;
height: 38px;
cursor: pointer;
}
/* 中间的 一, 相对定位 */
.i-nav-toggle i {
position: relative;
display: inline-block;
width: 28px;
height: 2.5px;
color: #fff;
font-weight: 700;
font-size: 14px;
background: #fff;
-webkit-transition: .2s;
transition: .2s;
}
/* 伪元素选择器 添加上下两个 一 */
.i-nav-toggle i::after,
.i-nav-toggle i::before {
content: '';
width: 28px;
height: 2.5px;
font-weight: 700;
font-size: 14px;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: .2s;
transition: .2s;
}
/* 给上下两个 一, 控制各自的位置 before在下, after在上 top:0为中线 */
.i-nav-toggle i::before {
top: 9px;
}
.i-nav-toggle i::after {
top: -9px;
}
/* 有两种方式:
1. 下逆时针 上顺时针
2. 下顺时针 上逆时针*
所以把下面的角度全部加上"-", 交叉方向就会改变; 类似可以更改before/after起始位置, 调整旋转方向
设置top重置为0,旋转时都会向中线靠,所以只需考虑before/after起始上下位置和点击后旋转方向即可
*/
/* 弹出层 打开时的样式 open 分别控制上下两个 一, 交叉 */
.i-nav-toggle.open i::before {
/* 下面的'一' top为0 重置到中线位置中心上移 同时搭配顺时针旋转 才有顺时针摆的感觉 (可以把top设置为9px transition时间设置久一点 搭配观察) */
top: 0;
height: 2px;
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.i-nav-toggle.open i::after {
top: 0;
height: 2px;
-webkit-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
/* 中线淡化 */
.i-nav-toggle.open i {
height: 0;
}
/* 弹出层样式 author: yincaiTA */
.i-shade {
width: 100%;
height: 100%;
position: fixed;
/* 60px是header的高 */
top: 60px;
left: 0px;
background: #000000;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
display: none;
z-index: 999;
}
/* 弹出的导航菜单样式(小屏幕 这里做演示 需要响应式自己在已有基础上额外添加) */
.i-side-nav {
/* 固定定位 */
position: fixed;
top: 60px;
/* 侧导航菜单一直存在 只是在屏幕外 */
right: -274px;
height: 100%;
width: 274px;
z-index: 1000;
background-color: dodgerblue;
transition: .3s;
}
/* 打开时的样式 */
.i-side-nav.open {
right: 0;
}
header {
height: 60px;
background-color: #d35400;
}
</style>
</head>
<body>
<!-- 顶部区域 -->
<header id="header">
<!-- X/三 toggle -->
<div class="i-nav-toggle" id="i-nav-toggle">
<a><i></i></a>
</div>
<!-- 大屏时菜单 -->
<nav></nav>
</header>
<!-- 弹出层(小屏时 弹出的菜单) -->
<div class="i-side-nav" id="i-side-nav">
我是侧面弹出的导航菜单
</div>
<!-- 遮盖层 -->
<div class="i-shade" id="i-shade">
</div>
<script>
// jQuery v1.12.4 author: yincaiTA
// 页面加载后执行
$(function() {
// 给 'X/三' 添加单击事件
$(".i-nav-toggle").click(function(e) {
// 加上阻止事件冒泡 让a标签和i标签受到的点击事件交给 div.i-nav-toggle 处理
e.stopPropagation();
// 增删 .open
let toggle = $(".i-nav-toggle");
// 这里分情况: 是为了点击其他位置关闭弹出层时, 不发生相互影响
if (toggle.hasClass("open")) {
// 已经open就关上
toggle.removeClass("open");
$(".i-side-nav").removeClass("open");
// 关闭全屏阴影
$(".i-shade")[0].style.display = 'none';
} else {
// 没有open就打开(toggle按钮样式变化)
toggle.addClass("open");
// 侧边导航菜单打开
$(".i-side-nav").addClass("open");
// 打开全屏阴影 去除i-shadenav的display:none
$(".i-shade")[0].style.display = 'block';
}
});
// 添加点击弹出框之外的地方时 关闭弹出框
$(document).click(function(e) {
let target = e ? e.target : window.event.srcElement;
// 点击不是弹出框或者toggle按钮 才关闭弹出框 (也不包含toggla按钮,是因为会扰乱toggle按钮自身增删.open的逻辑)
if (target.id != "i-side-nav" && target.id != "i-nav-toggle" && target.id != "header") {
$(".i-side-nav").removeClass("open");
$(".i-nav-toggle").removeClass("open");
$(".i-shade")[0].style.display = 'none';
}
});
});
</script>
</body>
</html>