先祝大家鸡年大吉。看过NEXT模板主题的博客,很喜欢它目录放在侧边栏的样子,于是寻思着也给博客弄一个侧边栏目录。其中用到了如何用CSS和JavaScript实现一个带动画的菜单图标。

静态菜单图标

常见的菜单图标由三条黑线组成:

1
2
3
4
5
<div class="menu-icon-wrapper">
<div></div>
<div></div>
<div></div>
</div>
1
2
3
4
5
6
.menu-icon-wrapper div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}

3条黑线并排在 menu-icon-wrapper 里,通过 margin 设置间隔,形成菜单图标。

动画菜单图标

动态菜单图标是在静态菜单图标的基础上通过控制变形形成的。

首先添加HTML

1
2
3
4
5
<div class="menu-icon-wrapper open" onclick="toggle(this)">
<div class="menu-icon-first"></div>
<div class="menu-icon-second"></div>
<div class="menu-icon-thrid"></div>
</div>

然后添加基本菜单样式的CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
.menu-icon-wrapper {
display: inline-block;
cursor: pointer;
}
.menu-icon-first, .menu-icon-second, .menu-icon-thrid {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: 0.4s;
}

接下来控制三个 横线 使其变为关闭的样式。横线的位置需要根据显示的样式进行微调。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 旋转第一条横线 */
.close .menu-icon-first {
-webkit-transform: rotate(-45deg) translate(-8px, 7px);
transform: rotate(-45deg) translate(-8px, 7px);
}
/* 隐藏第二条横线 */
.close .menu-icon-second {
opacity: 0;
}
/* 旋转第三条横线 */
.close .menu-icon-thrid {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}

还要一个效果,鼠标移到菜单上的时候,图标需要变为向左的箭头样式

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 旋转缩短第一条横线 */
.open:hover .menu-icon-first {
-webkit-transform: rotate(-45deg) translate(-6px, 0px);
transform: rotate(-45deg) translate(-6px, 0px);
width: 20px;
}
/* 旋转缩放第二条横线 */
.open:hover .menu-icon-thrid {
-webkit-transform: rotate(45deg) translate(-7px, 0px);
transform: rotate(45deg) translate(-7px, 0px);
width: 20px;
}

最后添加JavaScript代码控制菜单样式

1
2
3
4
function toggle(menu) {
menu.classList.toggle("open");
menu.classList.toggle("close");
}

预览一下效果。

参考文献