JS+CSS实现简单滑动门(滑动菜单)效果

JS+CSS实现简单滑动门（滑动菜单）效果，可以通过CSS的transition和transform属性以及JavaScript的事件处理函数来实现。

HTML结构

首先，在HTML中需要通过标签嵌套来构建滑动门的结构。以两个滑动门为例：

<div class="slider">
  <div class="slider-item">菜单1</div>
  <div class="slider-item">菜单2</div>
</div>

CSS样式设置

接下来，在CSS中设置样式。样式中需要设置滑动门的基本样式和hover状态时的样式。

.slider {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 400px;
  height: 50px;
  background-color: #ddd;
}

.slider-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50px;
  background-color: #fff;
  transition: transform .3s ease-out;
}

.slider-item:hover {
  transform: translateY(-10px);
}

这里的样式设置了滑动门的基本样式，其中.slider类设置了滑动门的基本样式，包括display: flex设置为flex布局、justify-content: space-between设置为两个菜单之间的间距相等、width: 400px设置滑动门的宽度、height: 50px设置滑动门的高度、background-color: #ddd设置滑动门的背景颜色。

.slider-item类设置了滑动门菜单的样式，包括display: flex设置为flex布局、justify-content: center设置为菜单内容水平居中、align-items: center设置为菜单内容垂直居中、width: 50%设置为两个菜单宽度均分、height: 50px设置菜单的高度、background-color: #fff设置菜单的背景颜色，并设置了transition: transform .3s ease-out表示菜单切换时的过渡动画效果为transform属性的变化，时间为.3s，动画效果为ease-out。

.slider-item:hover类设置了菜单hover时的样式，包括transform: translateY(-10px)设置菜单向上移动10px的动画效果。

JavaScript事件处理函数

最后，需要通过JavaScript的事件处理函数来实现滑动门菜单的效果。

const slider = document.querySelector('.slider');
const sliderItems = document.querySelectorAll('.slider-item');

sliderItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    sliderItems.forEach(item => item.classList.remove('active'));
    item.classList.add('active');
    slider.style.setProperty('--pos', `${index * -50}%`);
  });
});

这段JavaScript代码中，首先通过document.querySelector获取到.slider和.slider-item元素。然后，通过forEach方法遍历所有.slider-item元素，并为每个元素添加click事件监听器。当元素被点击时，先通过forEach方法将所有元素的active类样式移除，然后将当前点击的元素添加上active类样式。

接下来使用CSS变量--pos，通过JavaScript代码将其设置为菜单的左偏移量，以实现菜单的滑动效果。

示例1

下面是一个完整的示例代码：

<div class="slider">
  <div class="slider-item active">菜单1</div>
  <div class="slider-item">菜单2</div>
</div>

<style>
  .slider {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 400px;
    height: 50px;
    background-color: #ddd;
    overflow: hidden;
  }

  .slider-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 50px;
    background-color: #fff;
    transition: transform .3s ease-out;
  }

  .slider-item:hover {
    transform: translateY(-10px);
  }

  .active {
    color: red;
  }

  .slider::before,
  .slider::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 50px;
    background-color: #ddd;
  }

  .slider::before {
    left: 0;
    transform: var(--pos, 0);
    transition: transform .3s ease-out;
  }

  .slider::after {
    right: 0;
    transform: var(--pos, 0);
    transition: transform .3s ease-out;
  }
</style>

<script>
  const slider = document.querySelector('.slider');
  const sliderItems = document.querySelectorAll('.slider-item');

  sliderItems.forEach((item, index) => {
    item.addEventListener('click', () => {
      sliderItems.forEach(item => item.classList.remove('active'));
      item.classList.add('active');
      slider.style.setProperty('--pos', `${index * -50}%`);
    });
  });
</script>

示例2

下面是另一个完整的示例代码：

<div class="slider">
  <div class="slider-item active">菜单1</div>
  <div class="slider-item">菜单2</div>
  <div class="slider-item">菜单3</div>
  <div class="slider-item">菜单4</div>
  <div class="slider-item">菜单5</div>
</div>

<style>
  .slider {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 400px;
    height: 50px;
    background-color: #ddd;
    overflow: hidden;
  }

  .slider-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 50px;
    background-color: #fff;
    transition: transform .3s ease-out;
  }

  .slider-item:hover {
    transform: translateY(-10px);
  }

  .active {
    color: red;
  }

  .slider::before,
  .slider::after {
    content: "";
    position: absolute;
    width: 20%;
    height: 50px;
    background-color: #ddd;
  }

  .slider::before {
    left: 0;
    transform: var(--pos, 0);
    transition: transform .3s ease-out;
  }

  .slider::after {
    right: 0;
    transform: var(--pos, 0);
    transition: transform .3s ease-out;
  }
</style>

<script>
  const slider = document.querySelector('.slider');
  const sliderItems = document.querySelectorAll('.slider-item');

  sliderItems.forEach((item, index) => {
    item.addEventListener('click', () => {
      sliderItems.forEach(item => item.classList.remove('active'));
      item.classList.add('active');
      slider.style.setProperty('--pos', `${index * -20}%`);
    });
  });
</script>

在这个示例中，.slider元素的宽度为400px，一共有5个子元素，每个子元素的宽度为20%，菜单的滑动效果将每个元素的左偏移设置为index * -20%。这里还添加了一个:before和:after的伪元素，用于填充起始位置和结束位置的空隙，设置宽度为20%即可。