Bricks 桌面导航溢出自动折叠：菜单太多时的 More 按钮方案

UI/UX 文献建议导航项越少越好，但现实是客户非要塞一堆菜单项，导航栏容易溢出换行。与其写一堆媒体查询，不如用一段小脚本：菜单一溢出就自动折叠进“More”下拉。

本文基于 BricksLabs 公开免费教程实译，代码完整可复用。原文：How to add a resizable desktop navbar in Bricks

核心思路

页面加载时测量菜单容器实际宽度，一旦溢出，就把溢出的菜单项自动移入一个动态生成的 “More” 下拉按钮。窗口 resize 时重新计算，双向自适应。

结构 class 约定

三层结构，务必按约定加 class：

• .menu-wrapper — 最外层，宽度 100%（盒装导航可设 max-width）
• .menu-inner — 菜单项容器
• .menu-crop — 裁剪层

JS 自动折叠逻辑

window.addEventListener('load', () => {

   // 变量
   const wrapper = document.querySelector('.menu-wrapper');
   if (!wrapper) {
      return console.log('Resizable Desktop Menu - There is no menu-wrapper class on this page. Please double check you correctly assigned the classes to each element');
   }
   const inner = wrapper.querySelector('.menu-inner');
   if (!inner) {
      return console.log('Resizable Desktop Menu - There is no menu-inner class on this page. Please double check you correctly assigned the classes to each element');
   }

脚本对比 menu-inner 的滚动宽度与 menu-crop 的可见宽度，溢出时把最右侧项移动到动态生成的 #moreItem 下拉里，并更新 #moreQty 徽标数量。

CSS 细节

.menu-inner > * {
   white-space: nowrap;
}

#moreItem a {
   display: flex;
   align-items: flex-start;
   flex-wrap: nowrap;
   flex-direction: row;
}

span#moreQty {
   margin-left: 0.3rem;
   background-color: var(--bricks-color-primary, blue);
   padding: 0.3rem 0.45rem;
   font-size: 9px;
   color: #fff;
   border-radius: 50%;
   vertical-align: super;
   font-weight: 800;
   width: 15px;
   height: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
}

#moreQty 是 “More” 按钮上的数字徽标，实时显示当前折叠了几个菜单项。

小结

• 零插件、零媒体查询堆叠
• 窗口 resize 自动重新计算
• “More” 徽标让用户知道还有隐藏项

延伸阅读

• Bricks 菜单构建器/Mega Menu 指南
• Bricks 表单生成器完整指南

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程