css3 贴边隐藏菜单栏

在网页设计中，一个好的菜单栏可以让用户更加方便的使用网页。但是当菜单栏过长时，它会占据过多的空间影响视觉效果。为了解决这个问题，在 CSS3 中提供了一种新的方式，可以通过贴边隐藏菜单栏。

nav {
    position: fixed;
    top: 0;
    left: -200px;
     /* 负数值为隐藏 */width: 200px;
    height: 100vh;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    transition: left 0.3s ease-in-out;
}
nav.open {
    left: 0;
 /* 正数值为显示 */}
nav ul {
    padding: 20px;
}
nav ul li {
    list-style: none;
    margin-bottom: 20px;
}
nav ul li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}
.menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #666;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 9px;
    transition: transform 0.3s ease-in-out;
}
.menu-btn span:first-child {
    margin-top: 0;
}
.menu-btn.open span:first-child {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-btn.open span:last-child {
    transform: rotate(-45deg) translate(5px, -5px);
}
.menu-btn.open span:nth-child(2) {
    transform: scale(0);
}
    

上述代码中，我们使用了position: fixed; 定位方式使导航栏固定在屏幕上。通过设置导航栏的top: 0; 和left: -200px; ，可以将导航栏完全隐藏起来。

为了实现点击按钮出现菜单的效果，我们还需要用到 JS：

document.querySelector('.menu-btn').addEventListener('click', function() {
    document.querySelector('nav').classList.toggle('open');
    document.querySelector('.menu-btn').classList.toggle('open');
}
    );
    

代码中，我们首先用querySelector('.menu-btn')找到按钮元素，然后在点击事件中，使用classList.toggle('open')来控制菜单的显示和隐藏。

在样式上，我们还使用了一些 CSS3 新特性来美化样式，如box-shadow、transition和transform等。

如果你也想使用这种简单而实用的导航栏效果，可以在网页中引用上述代码。

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