css3实现收缩菜单

CSS3是一个强大的前端技术，可以实现各种炫酷的效果，其中之一就是收缩菜单。通过CSS3的transform和transition属性，可以轻松地实现这个效果。

/*CSS3收缩菜单的基本样式*/.menu {
        position: relative;
        width: 100%;
        background-color: #333;
        color: #fff;
        text-align: center;
        font-size: 0;
}
.menu li {
        display: inline-block;
        margin: 0 20px;
        font-size: 16px;
}
/*菜单收缩后的样式*/.menu.closed li {
        display: block;
        margin: 10px auto;
        font-size: 20px;
        opacity: 0;
        transform: translateY(-50px);
        transition: all 0.5s ease-in-out;
}
/*菜单展开后的样式*/.menu.opened li {
        opacity: 1;
        transform: translateY(0px);
}
    /*JS控制菜单的开合*/var menu = document.querySelector('.menu');
menu.addEventListener('click', function() {
        menu.classList.toggle('closed');
        menu.classList.toggle('opened');
}
    );
    

以上代码中，收缩和展开菜单的效果是通过.closed和.opened两个class控制的。当点击菜单时，JS会切换这两个class，从而实现菜单的开合。

CSS3收缩菜单的好处在于，它不需要使用JS实现动画效果，而是依赖于CSS3的transform和transition属性，使得效果更加流畅且不会影响页面性能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！