css3 左右滑动菜单

CSS3 左右滑动菜单是一种很好的页面效果，可以在页面中添加侧边栏、导航、选项卡等功能。下面我们来了解如何实现这个效果。

css3 左右滑动菜单

首先，在 HTML 中新建一个 div 元素并命名为“container”，并在其中添加两个子元素：“menu”和“content”：

<div class="container">
  <div class="menu"></div>
  <div class="content"></div>
</div>

接下来，在 CSS 中添加以下代码：

.container {
  display: flex;
  overflow-x: hidden;
}

.menu {
  order: 0;
  flex-grow: 0;
  flex-shrink: 0;
  width: 200px;
  background-color: #ccc;
  padding: 20px;
  transition: transform 0.2s ease-out;
}

.content {
  order: 1;
  flex-grow: 1;
  width: calc(100% - 200px);
  padding: 20px;
}

.menu.slide {
  transform: translateX(-200px);
}

这里的关键是使用 flexBox 布局，将容器“container”设置为弹性盒子，并将“menu”和“content”设置为子元素。然后将“menu”元素宽度设置为 200px，并通过过渡（transition）效果在滑动时添加动画效果。最后，通过给“menu”元素添加“slide”类并在 CSS 中设置该类的样式，实现左右滑动的效果。

最后，在 JavaScript 中通过添加事件监听实现滑动效果：

var menu = document.querySelector('.menu');

document.querySelector('.toggle').addEventListener('click',function() {
  menu.classList.toggle('slide');
});

这里通过选择“toggle”元素并添加点击事件监听，当点击时切换“menu”元素的“slide”类，从而实现左右滑动的效果。

css3 左右滑动菜单

相关文章