如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Universal Navigation 通用导航栏装修模块
概述
Universal Navigation 是一个为商城后台「设计 → 装修」功能增加通用导航栏展示模块的插件。你可以选择系统已有的站点导航菜单（在「设计 → 导航菜单」中维护），或在本模块内自建独立菜单，在首页任意位置以一条可自定义样式的导航栏展示，支持二级/图文下拉菜单。导航栏支持丰富的样式配置：文字加粗、字体大小、内容留白、对齐方式、边框显示（无/上下/全/上/下），以及文字、背景、边框颜色。非常适合用于首页顶部/底部导航栏、活动专题导航、分类导购栏等场景。
主要功能
🧭 双模式菜单源
| 模式 | 说明 |
|---|---|
| 站点导航菜单 | 引用系统已有的导航菜单（设计 → 导航菜单中维护），修改后此处自动同步 |
| 自定义菜单 | 在本模块内自建菜单，支持多级菜单项和子菜单（下拉），每个模块实例独立 |
🎨 丰富的样式配置
| 配置项 | 说明 |
|---|---|
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
| 文字加粗 | 开关控制是否加粗菜单文字 |
| 字体大小 | 可设置 12~28px |
| 内容留白 | 四向独立设置（上/右/下/左），范围 0~200px |
| 对齐方式 | 左对齐 / 居中 / 右对齐（仅 PC 端生效） |
| 边框显示 | 无边框 / 上下边框 / 全边框 / 仅上边框 / 仅下边框 |
| 文字颜色 | 自定义菜单文字颜色 |
| 背景颜色 | 自定义导航栏背景色（支持透明度） |
| 边框颜色 | 自定义边框颜色（支持透明度） |
📋 站点菜单特性
| 特性 | 说明 |
|---|---|
| 自动同步 | 与系统导航菜单共享数据，一处维护，多处处生效 |
| 二级下拉 | 支持带图文的二级/多列下拉菜单 |
| 徽章支持 | 菜单项可显示徽章（如「New」「Hot」） |
🔧 自定义菜单特性
| 特性 | 说明 |
|---|---|
| 拖拽排序 | 菜单项支持拖拽调整顺序 |
| 多级菜单 | 支持一级菜单 + 二级子菜单（下拉） |
| 独立配置 | 每个模块实例可有独立的菜单结构 |
| 多语言支持 | 菜单文字支持多语言配置 |
💡 下拉菜单特性
| 特性 | 说明 |
|---|---|
| 智能定位 | 下拉菜单自动检测视口边界，溢出时自动靠右收口 |
| 响应式适配 | 移动端导航栏横向滚动，下拉菜单切换为点击展开 |
| 悬停切换 | PC 端鼠标悬停展开下拉，移动端点击展开 |
技术特点
-
✅ 双菜单源：站点菜单（自动同步）或自定义菜单（独立自建）
-
✅ 丰富的样式自定义：文字、背景、边框、留白、对齐方式全面可调
-
✅ 智能下拉定位：自动检测视口边缘，防止下拉菜单溢出屏幕
-
✅ 悬停下划线动画：菜单项悬停时下划线从中心向两侧展开
-
✅ 响应式移动端：移动端导航栏横向滚动，下拉菜单改用手风琴式点击展开
-
✅ 拖拽排序：自定义菜单项支持拖拽调整顺序
-
✅ 多语言支持：菜单文字支持多语言独立配置
-
✅ 任意主题兼容：前台视图由插件自带，样式使用 CSS 变量适配主题
-
✅ 装修编辑器完美支持：实时预览，菜单选择和管理直观易用
适用场景
-
首页顶部/底部导航栏
-
活动/专题页面导航栏
-
分类导购栏
-
品牌专区入口
-
帮助中心/文档导航
