JS实现菜单左右滚动显示教程：代码示例详解

本文将详细介绍如何使用JavaScript实现菜单的左右滚动功能。在网页开发中，当菜单项过多时，为了提高用户体验，我们会考虑采用滚动的方式来展示菜单内容。这里通过一个具体的实例来演示这一过程。 首先，我们来看一下HTML结构，使用了`<ul>`元素来创建菜单列表，每个菜单项包含在一个`.zj_nei_lli`类的列表项中，设置了浮动属性使其水平排列： ```html <ul class="zj_nei_l"> <li class="zj_nei_lli show_box left_box">菜单项1</li> <!-- 更多菜单项... --> </ul> ``` 为了实现左右滚动效果，我们将创建两个隐藏的容器：`.show_box.left_box`和`.show_box.right_box`。初始状态下，`.left_box`显示，`.right_box`隐藏。当用户鼠标悬停在当前可见的菜单项上时，对应的`.show_box`容器会扩展宽度，而另一个则收缩宽度，实现左右切换： ```html <li class="zj_nei_lli show_box left_box"> <div class="text_content"> <p>菜单项1</p> </div> </li> <li class="zj_nei_lli show_box hover时变为.right_box"> <!-- 当鼠标悬停时，这里的宽度会被扩展 --> </li> ``` CSS样式定义了这两种状态下的样式，如`.show_box.left_box`和`.show_box.right_box`的宽度、背景颜色以及文本样式。当鼠标悬停在`.left_box`上时，`.show_box_hover`类会添加，使得`.right_box`的宽度增加，从而触发滚动显示： ```css .zj_nei_lli.show_box_hover { width: 522px; } .right_box { display: none; /* 其他样式 */ } ``` JavaScript部分，我们需要监听菜单项的`mouseover`和`mouseout`事件，来控制`.show_box`的宽度变化。这可以通过`addEventListener`函数实现： ```javascript let leftBox = document.querySelector('.left_box'); let rightBox = document.querySelector('.right_box'); leftBox.addEventListener('mouseover', function() { rightBox.style.width = '414px'; }); leftBox.addEventListener('mouseout', function() { rightBox.style.width = '98px'; }); ``` 这样，当用户鼠标移到菜单项上时，相应的`.right_box`会显示出更多菜单项，离开时则恢复到原始宽度。通过这个例子，我们可以看到如何使用JavaScript结合CSS来实现动态菜单的左右滚动，以提升网页布局的灵活性和交互性。