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

HTML结构

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

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

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

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

<p class="slider">  <p class="slider-item active">菜单1</p>  <p class="slider-item">菜单2</p></p><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

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

<p class="slider">  <p class="slider-item active">菜单1</p>  <p class="slider-item">菜单2</p>  <p class="slider-item">菜单3</p>  <p class="slider-item">菜单4</p>  <p class="slider-item">菜单5</p></p><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%即可。