layui 中两个 menu 页面的使用方法

在前端开发中，layui 以其简洁易用的特性备受开发者青睐。其中，menu 组件作为常用的导航元素，在构建页面结构时发挥着重要作用。当涉及到两个 menu 页面的使用时，掌握正确的方法能够极大提升用户体验和开发效率。

在 HTML 结构方面，需要分别创建两个 menu 对应的 HTML 代码块。每个 menu 都有自己独立的容器，可以使用 <div> 标签包裹，并为其添加 layui-nav 类，以激活 layui 的菜单样式。例如：

<div class="layui-nav" lay-filter="menu1">
    <ul class="layui-nav-item">
        <li class="layui-nav-item"><a href="#">首页</a></li>
        <li class="layui-nav-item"><a href="#">产品</a></li>
    </ul>
</div>
<div class="layui-nav" lay-filter="menu2">
    <ul class="layui-nav-item">
        <li class="layui-nav-item"><a href="#">关于我们</a></li>
        <li class="layui-nav-item"><a href="#">联系我们</a></li>
    </ul>
</div>

接着是 JavaScript 交互部分。layui 通过 layui.use() 方法来引入相关模块，在这里我们需要引入 element 模块来操作 menu。在 element 模块中，可以监听不同 menu 的点击事件。比如：

layui.use('element', function () {
    var element = layui.element;
    element.on('nav(menu1)', function (elem) {
        // 处理 menu1 的点击逻辑
        console.log(elem.text());
    });
    element.on('nav(menu2)', function (elem) {
        // 处理 menu2 的点击逻辑
        console.log(elem.text());
    });
});

样式定制也不容忽视。可以根据项目需求对两个 menu 的样式进行调整。比如改变菜单的颜色、字体大小等。通过 CSS 选择器选中对应的 menu 容器，然后进行样式设置。例如：

.layui-nav#menu1 {
    background-color: #f0f0f0;
    color: #333;
}
.layui-nav#menu2 {
    background-color: #e0e0e0;
    color: #666;
}

通过上述步骤，我们可以在 layui 中高效地使用两个 menu 页面，实现不同的导航功能，为用户提供清晰便捷的导航体验，同时让页面结构更加有序和易于维护。无论是简单的页面导航，还是复杂的功能切换，掌握这些方法都能让开发工作更加顺畅。