CSS左右滑动导航是一种常见的网页导航方式，它可以让用户在其中简单、快速地找到所需内容。下面我们来一起学习如何实现这样的导航。

HTML结构：
<div class="slide">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
</div>
CSS样式：
.slide{
position: relative;
}
.slide ul{
position: absolute;
top: 0;
left: 0;
width: 500%; /*宽度为菜单数的5倍*/
transition: all 0.5s ease;
}
.slide ul li{
float: left;
width: 20%; /*每个菜单的宽度为总宽度的1/5*/
}
.slide ul li a{
display: block;
text-align: center;
}
JS代码：
var slideIndex = 0;
var slideTimer;
function showSlides() {
slideIndex++;
if (slideIndex >5) {
slideIndex = 1;
}
document.querySelector(".slide ul").style.marginLeft = "-" + (slideIndex - 1) * 20 + "%";
slideTimer = setTimeout(showSlides, 3000); /*每3秒自动滑动一次*/
}
showSlides(); /*调用函数*/

通过以上代码，我们可以实现菜单的左右滑动效果。其中，HTML结构中使用了一个div容器，并设置了其position为relative，用于容纳菜单的ul列表。ul列表的position设置为absolute，top和left值设置为0，以便放置在容器的最左侧。ul列表的宽度设置成菜单数的5倍，每个菜单的宽度设置为总宽度的1/5。

在样式中，我们为li元素设置了float属性，使菜单并排排列。a元素设置为块级元素，并居中显示。值得注意的是，我们使用了CSS3的transition属性来实现菜单平滑的滑动效果。

在JS代码中，我们定义了一个变量slideIndex来跟踪当前显示的菜单。我们使用setTimeout方法设置了一个滑动定时器，以便在每3秒钟滑动一次。在showSlides函数中，我们使slideIndex自增并检查，如果其值超过5，就将其重置为1。我们使用querySelector方法选中ul元素，并设置其marginLeft为当前菜单宽度的负值，以便显示下一个菜单。最后，我们调用showSlides函数，以便在页面加载时启动菜单自动滑动效果。