SumyBlog

    用CSS制作一个带有动画的菜单开关标识

    2017-01-28 果然还是前端 css menu icon javascript 538 字 2 分钟

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

    静态菜单图标

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

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

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

    动画菜单图标

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

    首先添加HTML

    <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代码

    .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;
}

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

    /* 旋转第一条横线 */
.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);
}

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

    /* 旋转缩短第一条横线 */
.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代码控制菜单样式

    function toggle(menu) {
    menu.classList.toggle("open");
    menu.classList.toggle("close");
}

    预览一下效果。

    参考内容

    上一篇2017年博客主题更换
    下一篇修正双系统Windows和Ubuntu时间不同步