简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français

开启辅助访问 切换到宽版

站内搜索

搜索

活动公告

通知：是的！我们正在计划一个大动作！
11-02 12:46
通知：Telegram 推送频道https://t.me/+2tB3a7aKXlw2YjA1 及时接收第一手论坛帖子信息～
10-23 09:32
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，将及时处理！
10-23 09:31
通知：加入QQ社群吧 https://qm.qq.com/q/QZibQd1hiq
10-23 09:28
通知：签到时间调整为每日4:00（东八区）
10-23 09:26
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

从零开始学习jQuery UI垂直导航菜单制作完整教程手把手教你创建响应式交互式导航栏解决网站导航设计难题提升用户体验和网站专业性

威震华夏关云长

3万

主题

349

科技点

3万

积分

大区版主

木柜子打湿

积分
31898

三倍冰淇淋无人之境【一阶】财Doro小樱（小丑装）立华奏以外的星空【二阶】⑨的冰沙
发表于 2025-9-10 00:30:13 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言

在当今的网页设计中，导航菜单是网站不可或缺的组成部分。一个好的导航菜单不仅能够帮助用户快速找到所需内容，还能提升网站的整体用户体验和专业性。jQuery UI作为一个强大的JavaScript库，提供了丰富的交互组件，使得创建美观且功能强大的导航菜单变得简单易行。

垂直导航菜单因其节省水平空间、易于组织和展示多层次内容的特点，在许多网站中得到了广泛应用。本教程将从零开始，手把手教你如何使用jQuery UI创建一个响应式、交互式的垂直导航菜单，帮助你解决网站导航设计难题，提升用户体验和网站专业性。

准备工作

在开始创建jQuery UI垂直导航菜单之前，我们需要进行一些准备工作，确保开发环境正确配置。

1. 下载必要的库文件

首先，我们需要下载jQuery和jQuery UI库。你可以从官方网站下载这些文件，或者通过CDN链接引入它们。

以下是使用CDN引入这些库的代码：
  2. <!-- 引入jQuery库 -->
  3. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  5. <!-- 引入jQuery UI库 -->
  6. <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  8. <!-- 引入jQuery UI CSS -->
  9. <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css">
复制代码

2. 创建项目文件结构

为了保持代码的有序性，我们建议创建以下项目文件结构：
  2. project/
  3. ├── index.html
  4. ├── css/
  5. │   └── style.css
  6. └── js/
  7.     └── script.js
复制代码

3. 基本HTML模板

创建一个基本的HTML文件，作为我们开发垂直导航菜单的起点：
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>jQuery UI垂直导航菜单教程</title>
  8.     <!-- 引入jQuery UI CSS -->
  9.     <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css">
  10.     <!-- 引入自定义CSS -->
  11.     <link rel="stylesheet" href="css/style.css">
  12. </head>
  13. <body>
  14.     <!-- 导航菜单将在这里 -->
  15.    
  16.     <!-- 引入jQuery库 -->
  17.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  18.     <!-- 引入jQuery UI库 -->
  19.     <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  20.     <!-- 引入自定义JavaScript -->
  21.     <script src="js/script.js"></script>
  22. </body>
  23. </html>
复制代码

现在，我们已经完成了准备工作，可以开始创建垂直导航菜单的基本HTML结构了。

基础HTML结构

创建一个语义化良好的HTML结构是构建导航菜单的第一步。我们将使用无序列表（<ul>）和列表项（<li>）来构建导航菜单的基本框架。

1. 基本导航菜单结构

在<body>标签中添加以下HTML代码：
  2. <div class="container">
  3.     <nav class="vertical-menu">
  4.         <ul id="menu">
  5.             <li><a href="#">首页</a></li>
  6.             <li><a href="#">关于我们</a></li>
  7.             <li><a href="#">服务</a>
  8.                 <ul>
  9.                     <li><a href="#">网站设计</a></li>
  10.                     <li><a href="#">应用开发</a></li>
  11.                     <li><a href="#">数字营销</a></li>
  12.                 </ul>
  13.             </li>
  14.             <li><a href="#">产品</a>
  15.                 <ul>
  16.                     <li><a href="#">产品类别1</a></li>
  17.                     <li><a href="#">产品类别2</a></li>
  18.                     <li><a href="#">产品类别3</a>
  19.                         <ul>
  20.                             <li><a href="#">子产品1</a></li>
  21.                             <li><a href="#">子产品2</a></li>
  22.                             <li><a href="#">子产品3</a></li>
  23.                         </ul>
  24.                     </li>
  25.                 </ul>
  26.             </li>
  27.             <li><a href="#">博客</a></li>
  28.             <li><a href="#">联系我们</a></li>
  29.         </ul>
  30.     </nav>
  31.    
  32.     <div class="content">
  33.         <h1>欢迎访问我们的网站</h1>
  34.         <p>这是一个使用jQuery UI创建的垂直导航菜单示例。</p>
  35.     </div>
  36. </div>
复制代码

这个HTML结构创建了一个包含多级菜单的垂直导航菜单。顶级菜单项包括”首页”、”关于我们”、”服务”、”产品”、”博客”和”联系我们”。其中，”服务”和”产品”菜单项包含子菜单，”产品类别3”还包含一个三级子菜单。

2. 添加辅助内容

为了使示例更加完整，我们添加一些辅助内容，以便更好地展示导航菜单的效果：
  2. <div class="content">
  3.     <h1>欢迎访问我们的网站</h1>
  4.     <p>这是一个使用jQuery UI创建的垂直导航菜单示例。</p>
  5.    
  6.     <h2>关于本教程</h2>
  7.     <p>本教程将教你如何从零开始创建一个响应式、交互式的垂直导航菜单。通过使用jQuery UI，我们可以轻松地添加各种交互效果，提升用户体验。</p>
  8.    
  9.     <h2>导航菜单的特点</h2>
  10.     <ul>
  11.         <li>响应式设计，适应不同屏幕尺寸</li>
  12.         <li>多级菜单支持</li>
  13.         <li>平滑的展开/收起动画</li>
  14.         <li>可定制的主题和样式</li>
  15.         <li>键盘导航支持</li>
  16.     </ul>
  17. </div>
复制代码

现在，我们已经创建了垂直导航菜单的基本HTML结构。接下来，我们将使用CSS来美化导航菜单的外观。

CSS样式设计

CSS样式对于创建美观的导航菜单至关重要。在这一部分，我们将为垂直导航菜单添加样式，使其看起来更加专业和吸引人。

1. 基本样式

在css/style.css文件中添加以下基本样式：
  2. /* 全局样式 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. body {
  10.     font-family: 'Arial', sans-serif;
  11.     line-height: 1.6;
  12.     color: #333;
  13.     background-color: #f5f5f5;
  14. }
  16. .container {
  17.     display: flex;
  18.     min-height: 100vh;
  19. }
  21. /* 垂直导航菜单样式 */
  22. .vertical-menu {
  23.     width: 250px;
  24.     background-color: #2c3e50;
  25.     padding: 20px 0;
  26.     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  27. }
  29. .vertical-menu ul {
  30.     list-style: none;
  31. }
  33. .vertical-menu ul li {
  34.     position: relative;
  35. }
  37. .vertical-menu ul li a {
  38.     display: block;
  39.     padding: 12px 20px;
  40.     color: #ecf0f1;
  41.     text-decoration: none;
  42.     transition: all 0.3s ease;
  43. }
  45. .vertical-menu ul li a:hover {
  46.     background-color: #34495e;
  47.     color: #3498db;
  48. }
  50. /* 内容区域样式 */
  51. .content {
  52.     flex: 1;
  53.     padding: 30px;
  54. }
  56. .content h1 {
  57.     margin-bottom: 20px;
  58.     color: #2c3e50;
  59. }
  61. .content h2 {
  62.     margin-top: 30px;
  63.     margin-bottom: 15px;
  64.     color: #34495e;
  65. }
  67. .content p {
  68.     margin-bottom: 15px;
  69. }
  71. .content ul {
  72.     margin-left: 20px;
  73.     margin-bottom: 15px;
  74. }
  76. .content ul li {
  77.     margin-bottom: 8px;
  78. }
复制代码

这些基本样式为垂直导航菜单提供了一个深色背景，并设置了菜单项的基本样式，包括颜色、内边距和悬停效果。同时，我们也为内容区域添加了基本样式，使其看起来更加整洁和专业。

2. 子菜单样式

接下来，我们为子菜单添加样式，使其与父菜单有所区别，并提供更好的视觉层次：
  2. /* 子菜单样式 */
  3. .vertical-menu ul ul {
  4.     display: none;
  5.     background-color: #34495e;
  6. }
  8. .vertical-menu ul li:hover > ul {
  9.     display: block;
  10. }
  12. .vertical-menu ul ul li a {
  13.     padding-left: 40px;
  14.     font-size: 0.9em;
  15. }
  17. .vertical-menu ul ul ul li a {
  18.     padding-left: 60px;
  19.     font-size: 0.8em;
  20. }
复制代码

这些样式为子菜单设置了不同的背景颜色和缩进，使它们在视觉上与父菜单区分开来。目前，我们使用简单的CSS悬停效果来显示子菜单，稍后我们将使用jQuery UI来增强这些交互效果。

3. 添加图标

为了使导航菜单更加直观和吸引人，我们可以为菜单项添加图标。我们将使用Font Awesome图标库，这是一个广泛使用的图标库，提供了大量免费图标。

首先，在HTML文件的<head>部分添加Font Awesome的CDN链接：
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
复制代码

然后，修改HTML结构，为每个菜单项添加相应的图标：
  2. <div class="container">
  3.     <nav class="vertical-menu">
  4.         <ul id="menu">
  5.             <li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
  6.             <li><a href="#"><i class="fas fa-info-circle"></i> 关于我们</a></li>
  7.             <li><a href="#"><i class="fas fa-concierge-bell"></i> 服务</a>
  8.                 <ul>
  9.                     <li><a href="#"><i class="fas fa-paint-brush"></i> 网站设计</a></li>
  10.                     <li><a href="#"><i class="fas fa-code"></i> 应用开发</a></li>
  11.                     <li><a href="#"><i class="fas fa-bullhorn"></i> 数字营销</a></li>
  12.                 </ul>
  13.             </li>
  14.             <li><a href="#"><i class="fas fa-box"></i> 产品</a>
  15.                 <ul>
  16.                     <li><a href="#"><i class="fas fa-cube"></i> 产品类别1</a></li>
  17.                     <li><a href="#"><i class="fas fa-cube"></i> 产品类别2</a></li>
  18.                     <li><a href="#"><i class="fas fa-cube"></i> 产品类别3</a>
  19.                         <ul>
  20.                             <li><a href="#"><i class="fas fa-gem"></i> 子产品1</a></li>
  21.                             <li><a href="#"><i class="fas fa-gem"></i> 子产品2</a></li>
  22.                             <li><a href="#"><i class="fas fa-gem"></i> 子产品3</a></li>
  23.                         </ul>
  24.                     </li>
  25.                 </ul>
  26.             </li>
  27.             <li><a href="#"><i class="fas fa-blog"></i> 博客</a></li>
  28.             <li><a href="#"><i class="fas fa-envelope"></i> 联系我们</a></li>
  29.         </ul>
  30.     </nav>
  31.    
  32.     <div class="content">
  33.         <!-- 内容保持不变 -->
  34.     </div>
  35. </div>
复制代码

最后，为图标添加一些样式，使它们与文本更好地配合：
  2. /* 图标样式 */
  3. .vertical-menu ul li a i {
  4.     margin-right: 10px;
  5.     width: 20px;
  6.     text-align: center;
  7. }
复制代码

现在，我们的垂直导航菜单已经具有了基本的样式和图标。接下来，我们将使用jQuery UI来添加交互功能，使菜单更加动态和用户友好。

jQuery UI初始化

jQuery UI提供了许多交互组件，我们可以利用这些组件来增强导航菜单的功能。在这一部分，我们将使用jQuery UI的Menu组件来初始化我们的垂直导航菜单，并添加一些交互效果。

1. 初始化jQuery UI Menu组件

在js/script.js文件中添加以下代码：
  2. $(document).ready(function() {
  3.     // 初始化jQuery UI Menu组件
  4.     $("#menu").menu({
  5.         position: { my: "left top", at: "right top" },
  6.         icons: { submenu: "ui-icon-caret-1-e" },
  7.         // 禁用默认的动画效果，我们将自定义动画
  8.         menus: "ul",
  9.         // 添加自定义类名，便于样式定制
  10.         classes: {
  11.             "ui-menu": "ui-menu-custom",
  12.             "ui-menu-item": "ui-menu-item-custom"
  13.         }
  14.     });
  15. });
复制代码

这段代码使用jQuery UI的Menu组件初始化了我们的导航菜单。我们设置了一些选项，如子菜单位置、子菜单图标和自定义类名，以便于后续的样式定制。

2. 自定义jQuery UI Menu样式

虽然jQuery UI提供了一些默认样式，但我们可能需要根据自己的设计需求进行一些调整。在css/style.css文件中添加以下样式：
  2. /* 自定义jQuery UI Menu样式 */
  3. .ui-menu-custom {
  4.     width: 100%;
  5.     background-color: #2c3e50;
  6.     border: none;
  7.     border-radius: 0;
  8.     box-shadow: none;
  9. }
  11. .ui-menu-item-custom {
  12.     margin: 0;
  13.     padding: 0;
  14. }
  16. .ui-menu-item-custom a {
  17.     display: block;
  18.     padding: 12px 20px;
  19.     color: #ecf0f1;
  20.     text-decoration: none;
  21.     transition: all 0.3s ease;
  22.     border: none;
  23.     border-radius: 0;
  24.     background-color: transparent;
  25. }
  27. .ui-menu-item-custom a:hover,
  28. .ui-menu-item-custom a:focus {
  29.     background-color: #34495e;
  30.     color: #3498db;
  31.     border: none;
  32. }
  34. .ui-menu-item-custom.ui-state-active {
  35.     background-color: #3498db;
  36.     color: #fff;
  37.     border: none;
  38. }
  40. /* 子菜单样式 */
  41. .ui-menu-custom .ui-menu {
  42.     width: 100%;
  43.     background-color: #34495e;
  44.     border: none;
  45.     border-radius: 0;
  46.     box-shadow: none;
  47.     top: 0 !important;
  48.     left: 100% !important;
  49. }
  51. .ui-menu-custom .ui-menu .ui-menu-item a {
  52.     padding-left: 40px;
  53.     font-size: 0.9em;
  54. }
  56. .ui-menu-custom .ui-menu .ui-menu .ui-menu-item a {
  57.     padding-left: 60px;
  58.     font-size: 0.8em;
  59. }
  61. /* 子菜单图标 */
  62. .ui-menu-custom .ui-menu-icon {
  63.     position: absolute;
  64.     right: 10px;
  65.     top: 50%;
  66.     margin-top: -8px;
  67. }
复制代码

这些样式覆盖了jQuery UI的默认样式，使导航菜单的外观与我们的设计保持一致。我们调整了菜单项的背景色、文字颜色、悬停效果等，并确保子菜单正确显示在父菜单的右侧。

3. 添加动画效果

为了使导航菜单的交互更加流畅和吸引人，我们可以添加一些动画效果。修改js/script.js文件中的代码：
  2. $(document).ready(function() {
  3.     // 初始化jQuery UI Menu组件
  4.     $("#menu").menu({
  5.         position: { my: "left top", at: "right top" },
  6.         icons: { submenu: "ui-icon-caret-1-e" },
  7.         // 添加自定义动画
  8.         beforeShow: function(event, ui) {
  9.             $(ui.item).children("ul").hide().slideDown(300);
  10.         },
  11.         beforeHide: function(event, ui) {
  12.             $(ui.item).children("ul").show().slideUp(300);
  13.         },
  14.         menus: "ul",
  15.         // 添加自定义类名，便于样式定制
  16.         classes: {
  17.             "ui-menu": "ui-menu-custom",
  18.             "ui-menu-item": "ui-menu-item-custom"
  19.         }
  20.     });
  21.    
  22.     // 为菜单项添加点击事件
  23.     $("#menu .ui-menu-item").on("click", function() {
  24.         // 移除所有菜单项的活动状态
  25.         $("#menu .ui-menu-item").removeClass("active");
  26.         // 为当前点击的菜单项添加活动状态
  27.         $(this).addClass("active");
  28.     });
  29. });
复制代码

这段代码添加了子菜单的展开和收起动画效果，并为菜单项添加了点击事件，以便在用户点击菜单项时添加活动状态。

在css/style.css文件中添加以下样式，以支持活动状态：
  2. /* 菜单项活动状态 */
  3. .ui-menu-item-custom.active > a {
  4.     background-color: #3498db;
  5.     color: #fff;
  6. }
复制代码

现在，我们的垂直导航菜单已经具有了基本的交互功能。接下来，我们将使其响应式，以适应不同设备的屏幕尺寸。

响应式设计

在当今的移动优先时代，使导航菜单响应式是非常重要的。在这一部分，我们将添加一些CSS和JavaScript代码，使我们的垂直导航菜单能够适应不同设备的屏幕尺寸。

1. 添加媒体查询

在css/style.css文件中添加以下媒体查询，以适应不同的屏幕尺寸：
  2. /* 平板设备 */
  3. @media (max-width: 768px) {
  4.     .container {
  5.         flex-direction: column;
  6.     }
  7.    
  8.     .vertical-menu {
  9.         width: 100%;
  10.         padding: 10px 0;
  11.     }
  12.    
  13.     .content {
  14.         padding: 20px;
  15.     }
  16.    
  17.     .ui-menu-custom .ui-menu {
  18.         position: static !important;
  19.         width: 100% !important;
  20.         box-shadow: none !important;
  21.         left: 0 !important;
  22.         top: 0 !important;
  23.     }
  24.    
  25.     .ui-menu-custom .ui-menu .ui-menu-item a {
  26.         padding-left: 30px;
  27.     }
  28.    
  29.     .ui-menu-custom .ui-menu .ui-menu .ui-menu-item a {
  30.         padding-left: 45px;
  31.     }
  32. }
  34. /* 移动设备 */
  35. @media (max-width: 480px) {
  36.     .vertical-menu {
  37.         padding: 5px 0;
  38.     }
  39.    
  40.     .vertical-menu ul li a {
  41.         padding: 10px 15px;
  42.         font-size: 0.9em;
  43.     }
  44.    
  45.     .ui-menu-custom .ui-menu .ui-menu-item a {
  46.         padding-left: 25px;
  47.     }
  48.    
  49.     .ui-menu-custom .ui-menu .ui-menu .ui-menu-item a {
  50.         padding-left: 35px;
  51.     }
  52.    
  53.     .content {
  54.         padding: 15px;
  55.     }
  56.    
  57.     .content h1 {
  58.         font-size: 1.5em;
  59.     }
  60.    
  61.     .content h2 {
  62.         font-size: 1.3em;
  63.     }
  64. }
复制代码

这些媒体查询根据屏幕宽度调整了导航菜单和内容区域的布局和样式。在平板设备上，我们将导航菜单从垂直布局改为水平布局，而在移动设备上，我们进一步调整了内边距和字体大小，以适应更小的屏幕。

2. 添加响应式切换按钮

在小屏幕设备上，我们可能希望默认隐藏导航菜单，并通过一个按钮来切换其显示状态。让我们实现这个功能。

首先，修改HTML结构，添加一个切换按钮：
  2. <div class="container">
  3.     <button class="menu-toggle">
  4.         <i class="fas fa-bars"></i> 菜单
  5.     </button>
  6.    
  7.     <nav class="vertical-menu">
  8.         <!-- 导航菜单内容保持不变 -->
  9.     </nav>
  10.    
  11.     <div class="content">
  12.         <!-- 内容保持不变 -->
  13.     </div>
  14. </div>
复制代码

然后，在css/style.css文件中添加以下样式：
  2. /* 菜单切换按钮 */
  3. .menu-toggle {
  4.     display: none;
  5.     background-color: #2c3e50;
  6.     color: #ecf0f1;
  7.     border: none;
  8.     padding: 10px 15px;
  9.     cursor: pointer;
  10.     width: 100%;
  11.     text-align: left;
  12.     font-size: 1em;
  13. }
  15. .menu-toggle:hover {
  16.     background-color: #34495e;
  17. }
  19. .menu-toggle i {
  20.     margin-right: 10px;
  21. }
  23. /* 移动设备样式 */
  24. @media (max-width: 768px) {
  25.     .menu-toggle {
  26.         display: block;
  27.     }
  28.    
  29.     .vertical-menu {
  30.         display: none;
  31.         width: 100%;
  32.     }
  33.    
  34.     .vertical-menu.active {
  35.         display: block;
  36.     }
  37. }
复制代码

最后，在js/script.js文件中添加以下代码，以实现菜单切换功能：
  2. $(document).ready(function() {
  3.     // 之前的代码保持不变
  4.    
  5.     // 菜单切换功能
  6.     $(".menu-toggle").on("click", function() {
  7.         $(".vertical-menu").slideToggle(300, function() {
  8.             $(this).toggleClass("active");
  9.         });
  10.     });
  11.    
  12.     // 在窗口大小改变时检查是否需要显示菜单
  13.     $(window).on("resize", function() {
  14.         if ($(window).width() > 768) {
  15.             $(".vertical-menu").show().addClass("active");
  16.         } else {
  17.             $(".vertical-menu").hide().removeClass("active");
  18.         }
  19.     });
  20. });
复制代码

这段代码添加了一个菜单切换按钮，在小屏幕设备上显示。当用户点击这个按钮时，导航菜单会以滑动动画的形式显示或隐藏。此外，我们还添加了一个窗口大小改变事件监听器，以确保在窗口大小改变时，导航菜单的显示状态正确。

现在，我们的垂直导航菜单已经完全响应式，可以适应不同设备的屏幕尺寸。接下来，我们将添加一些高级功能，使导航菜单更加功能强大和用户友好。

高级功能

在这一部分，我们将添加一些高级功能，如搜索功能、固定位置导航、滚动效果等，使我们的垂直导航菜单更加功能强大和用户友好。

1. 添加搜索功能

在导航菜单中添加搜索功能可以帮助用户快速找到所需内容。让我们实现这个功能。

首先，修改HTML结构，在导航菜单中添加搜索框：
  2. <nav class="vertical-menu">
  3.     <div class="menu-search">
  4.         <input type="text" id="menu-search-input" placeholder="搜索菜单...">
  5.         <button id="menu-search-button"><i class="fas fa-search"></i></button>
  6.     </div>
  7.    
  8.     <ul id="menu">
  9.         <!-- 导航菜单内容保持不变 -->
  10.     </ul>
  11. </nav>
复制代码

然后，在css/style.css文件中添加以下样式：
  2. /* 菜单搜索框样式 */
  3. .menu-search {
  4.     padding: 10px 15px;
  5.     display: flex;
  6.     border-bottom: 1px solid #34495e;
  7. }
  9. #menu-search-input {
  10.     flex: 1;
  11.     padding: 8px 10px;
  12.     border: none;
  13.     border-radius: 3px 0 0 3px;
  14.     background-color: #34495e;
  15.     color: #ecf0f1;
  16. }
  18. #menu-search-input:focus {
  19.     outline: none;
  20.     background-color: #3d566e;
  21. }
  23. #menu-search-button {
  24.     padding: 8px 12px;
  25.     border: none;
  26.     background-color: #3498db;
  27.     color: #fff;
  28.     cursor: pointer;
  29.     border-radius: 0 3px 3px 0;
  30. }
  32. #menu-search-button:hover {
  33.     background-color: #2980b9;
  34. }
  36. /* 搜索结果高亮 */
  37. .ui-menu-item-custom.search-result > a {
  38.     background-color: #3498db;
  39.     color: #fff;
  40. }
  42. .ui-menu-item-custom.no-search-result > a {
  43.     color: #95a5a6;
  44.     cursor: default;
  45. }
  47. .ui-menu-item-custom.no-search-result > a:hover {
  48.     background-color: transparent;
  49.     color: #95a5a6;
  50. }
复制代码

最后，在js/script.js文件中添加以下代码，以实现搜索功能：
  2. $(document).ready(function() {
  3.     // 之前的代码保持不变
  4.    
  5.     // 菜单搜索功能
  6.     $("#menu-search-input").on("keyup", function() {
  7.         var searchTerm = $(this).val().toLowerCase();
  8.         
  9.         if (searchTerm === "") {
  10.             // 如果搜索框为空，显示所有菜单项
  11.             $("#menu .ui-menu-item").removeClass("search-result no-search-result").show();
  12.             $("#menu .ui-menu").show();
  13.         } else {
  14.             var found = false;
  15.             
  16.             // 遍历所有顶级菜单项
  17.             $("#menu > .ui-menu-item").each(function() {
  18.                 var menuItem = $(this);
  19.                 var menuText = menuItem.text().toLowerCase();
  20.                
  21.                 if (menuText.includes(searchTerm)) {
  22.                     // 如果菜单项包含搜索词，显示该菜单项及其所有子菜单
  23.                     menuItem.removeClass("no-search-result").addClass("search-result").show();
  24.                     menuItem.find(".ui-menu").show();
  25.                     menuItem.find(".ui-menu-item").removeClass("no-search-result").show();
  26.                     found = true;
  27.                 } else {
  28.                     // 检查子菜单是否包含搜索词
  29.                     var subMenuFound = false;
  30.                     
  31.                     menuItem.find(".ui-menu-item").each(function() {
  32.                         var subMenuItem = $(this);
  33.                         var subMenuText = subMenuItem.text().toLowerCase();
  34.                         
  35.                         if (subMenuText.includes(searchTerm)) {
  36.                             subMenuItem.removeClass("no-search-result").show();
  37.                             subMenuFound = true;
  38.                             found = true;
  39.                         } else {
  40.                             subMenuItem.removeClass("search-result").addClass("no-search-result").hide();
  41.                         }
  42.                     });
  43.                     
  44.                     if (subMenuFound) {
  45.                         menuItem.removeClass("no-search-result").show();
  46.                         menuItem.find(".ui-menu").show();
  47.                     } else {
  48.                         menuItem.removeClass("search-result").addClass("no-search-result").hide();
  49.                         menuItem.find(".ui-menu").hide();
  50.                     }
  51.                 }
  52.             });
  53.             
  54.             // 如果没有找到任何匹配项，显示一条消息
  55.             if (!found) {
  56.                 if ($("#no-search-result").length === 0) {
  57.                     $("#menu").append('<li class="ui-menu-item no-search-result" id="no-search-result"><a>没有找到匹配的菜单项</a></li>');
  58.                 }
  59.             } else {
  60.                 $("#no-search-result").remove();
  61.             }
  62.         }
  63.     });
  64.    
  65.     // 清除搜索按钮功能
  66.     $("#menu-search-button").on("click", function() {
  67.         $("#menu-search-input").val("").trigger("keyup");
  68.     });
  69. });
复制代码

这段代码实现了一个实时搜索功能，当用户在搜索框中输入内容时，导航菜单会实时过滤显示匹配的菜单项。如果菜单项的文本包含搜索词，该菜单项及其父菜单会被高亮显示；如果没有找到任何匹配项，会显示一条提示消息。

2. 固定位置导航

在某些情况下，我们可能希望导航菜单在页面滚动时保持固定位置，以便用户随时可以访问。让我们实现这个功能。

在css/style.css文件中添加以下样式：
  2. /* 固定位置导航 */
  3. .vertical-menu.fixed {
  4.     position: fixed;
  5.     top: 0;
  6.     left: 0;
  7.     height: 100vh;
  8.     overflow-y: auto;
  9.     z-index: 1000;
  10. }
  12. .content.with-fixed-menu {
  13.     margin-left: 250px;
  14. }
  16. /* 响应式调整 */
  17. @media (max-width: 768px) {
  18.     .content.with-fixed-menu {
  19.         margin-left: 0;
  20.     }
  21.    
  22.     .vertical-menu.fixed {
  23.         width: 100%;
  24.         height: auto;
  25.         max-height: 50vh;
  26.     }
  27. }
复制代码

然后，在js/script.js文件中添加以下代码：
  2. $(document).ready(function() {
  3.     // 之前的代码保持不变
  4.    
  5.     // 固定位置导航功能
  6.     function initFixedMenu() {
  7.         // 添加固定位置切换按钮
  8.         if ($(".menu-fixed-toggle").length === 0) {
  9.             $(".vertical-menu").prepend('<button class="menu-fixed-toggle"><i class="fas fa-thumbtack"></i></button>');
  10.         }
  11.         
  12.         // 固定位置切换按钮点击事件
  13.         $(".menu-fixed-toggle").on("click", function() {
  14.             $(".vertical-menu").toggleClass("fixed");
  15.             $(".content").toggleClass("with-fixed-menu");
  16.             $(this).toggleClass("active");
  17.         });
  18.     }
  19.    
  20.     // 初始化固定位置菜单功能
  21.     initFixedMenu();
  22. });
复制代码

最后，在css/style.css文件中添加以下样式：
  2. /* 固定位置切换按钮 */
  3. .menu-fixed-toggle {
  4.     display: block;
  5.     width: 100%;
  6.     padding: 10px;
  7.     background-color: transparent;
  8.     border: none;
  9.     color: #95a5a6;
  10.     cursor: pointer;
  11.     text-align: right;
  12.     font-size: 1em;
  13. }
  15. .menu-fixed-toggle:hover {
  16.     color: #ecf0f1;
  17. }
  19. .menu-fixed-toggle.active {
  20.     color: #3498db;
  21. }
  23. .menu-fixed-toggle i {
  24.     margin-right: 5px;
  25. }
复制代码

这段代码实现了一个固定位置导航功能，用户可以通过点击导航菜单右上角的图钉按钮来切换导航菜单的固定位置状态。当导航菜单处于固定位置时，它会始终显示在屏幕的左侧，即使用户滚动页面也是如此。

3. 添加平滑滚动效果

如果导航菜单中的链接指向页面内的锚点，我们可以添加平滑滚动效果，使页面滚动更加平滑和自然。

在js/script.js文件中添加以下代码：
  2. $(document).ready(function() {
  3.     // 之前的代码保持不变
  4.    
  5.     // 平滑滚动效果
  6.     $("#menu a[href^='#']").on("click", function(e) {
  7.         e.preventDefault();
  8.         
  9.         var target = $(this.getAttribute("href"));
  10.         if (target.length) {
  11.             $("html, body").animate({
  12.                 scrollTop: target.offset().left
  13.             }, 500);
  14.             
  15.             // 如果在移动设备上，点击菜单项后关闭菜单
  16.             if ($(window).width() <= 768) {
  17.                 $(".vertical-menu").slideToggle(300, function() {
  18.                     $(this).toggleClass("active");
  19.                 });
  20.             }
  21.         }
  22.     });
  23. });
复制代码

这段代码为导航菜单中指向页面内锚点的链接添加了平滑滚动效果。当用户点击这些链接时，页面会平滑滚动到目标位置，而不是立即跳转。在移动设备上，点击菜单项后还会自动关闭导航菜单，以提供更好的用户体验。

4. 添加活动菜单项指示器

为了指示当前活动的菜单项，我们可以添加一个活动菜单项指示器，使用户清楚地知道他们当前在哪个页面或部分。

在css/style.css文件中添加以下样式：
  2. /* 活动菜单项指示器 */
  3. .ui-menu-item-custom.active > a::before {
  4.     content: '';
  5.     position: absolute;
  6.     left: 0;
  7.     top: 0;
  8.     height: 100%;
  9.     width: 4px;
  10.     background-color: #3498db;
  11. }
  13. .ui-menu-custom .ui-menu .ui-menu-item.active > a::before {
  14.     width: 3px;
  15. }
  17. .ui-menu-custom .ui-menu .ui-menu .ui-menu-item.active > a::before {
  18.     width: 2px;
  19. }
复制代码

然后，在js/script.js文件中添加以下代码：
  2. $(document).ready(function() {
  3.     // 之前的代码保持不变
  4.    
  5.     // 设置活动菜单项
  6.     function setActiveMenuItem() {
  7.         // 获取当前URL的路径部分
  8.         var currentPath = window.location.pathname;
  9.         
  10.         // 遍历所有菜单链接
  11.         $("#menu a").each(function() {
  12.             var linkPath = $(this).attr("href");
  13.             
  14.             // 如果链接指向外部网站，跳过
  15.             if (linkPath.indexOf("http") === 0) {
  16.                 return;
  17.             }
  18.             
  19.             // 如果链接路径与当前路径匹配，设置为活动状态
  20.             if (linkPath === currentPath) {
  21.                 $(this).closest(".ui-menu-item").addClass("active");
  22.                
  23.                 // 展开父菜单
  24.                 $(this).closest(".ui-menu").show();
  25.                 $(this).closest(".ui-menu-item").parents(".ui-menu-item").addClass("active");
  26.             }
  27.         });
  28.     }
  29.    
  30.     // 初始化活动菜单项
  31.     setActiveMenuItem();
  32. });
复制代码

这段代码实现了一个活动菜单项指示器，它会根据当前页面的URL自动设置对应的菜单项为活动状态，并在活动菜单项的左侧显示一个蓝色指示条。同时，它还会展开包含活动菜单项的所有父菜单，使用户能够清楚地看到当前页面在导航菜单中的位置。

现在，我们的垂直导航菜单已经具有了许多高级功能，包括搜索功能、固定位置导航、平滑滚动效果和活动菜单项指示器。接下来，我们将讨论一些常见问题的解决方法。

常见问题解决

在开发和使用jQuery UI垂直导航菜单的过程中，可能会遇到一些常见问题。在这一部分，我们将讨论这些问题的解决方法。

1. 子菜单不显示或显示不正确

问题：子菜单不显示或显示位置不正确。

解决方案：

这个问题通常是由于CSS样式冲突或jQuery UI初始化不正确导致的。首先，检查jQuery UI是否正确初始化：
  2. $(document).ready(function() {
  3.     $("#menu").menu({
  4.         position: { my: "left top", at: "right top" },
  5.         icons: { submenu: "ui-icon-caret-1-e" },
  6.         menus: "ul"
  7.     });
  8. });
复制代码

然后，检查CSS样式是否正确设置子菜单位置：
  2. .ui-menu-custom .ui-menu {
  3.     position: absolute;
  4.     width: 100%;
  5.     background-color: #34495e;
  6.     border: none;
  7.     border-radius: 0;
  8.     box-shadow: none;
  9.     top: 0 !important;
  10.     left: 100% !important;
  11. }
复制代码

如果问题仍然存在，尝试使用浏览器的开发者工具检查是否有其他CSS样式覆盖了这些设置。

2. 响应式布局不工作

问题：在小屏幕设备上，导航菜单的响应式布局不工作。

解决方案：

首先，确保HTML的<head>部分包含了视口元标签：
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

然后，检查媒体查询是否正确设置：
  2. @media (max-width: 768px) {
  3.     .container {
  4.         flex-direction: column;
  5.     }
  6.    
  7.     .vertical-menu {
  8.         width: 100%;
  9.         padding: 10px 0;
  10.     }
  11.    
  12.     /* 其他响应式样式 */
  13. }
复制代码

最后，确保JavaScript代码中包含了窗口大小改变事件监听器：
  2. $(window).on("resize", function() {
  3.     if ($(window).width() > 768) {
  4.         $(".vertical-menu").show().addClass("active");
  5.     } else {
  6.         $(".vertical-menu").hide().removeClass("active");
  7.     }
  8. });
复制代码

3. 菜单项点击事件不触发

问题：点击菜单项时，预期的点击事件不触发。

解决方案：

这个问题通常是由于事件委托或事件冒泡问题导致的。尝试使用事件委托来处理菜单项的点击事件：
  2. $("#menu").on("click", ".ui-menu-item", function(e) {
  3.     // 阻止事件冒泡
  4.     e.stopPropagation();
  5.    
  6.     // 移除所有菜单项的活动状态
  7.     $("#menu .ui-menu-item").removeClass("active");
  8.    
  9.     // 为当前点击的菜单项添加活动状态
  10.     $(this).addClass("active");
  11.    
  12.     // 其他点击事件处理代码
  13. });
复制代码

如果菜单项包含链接，确保链接的默认行为没有被意外阻止：
  2. $("#menu").on("click", ".ui-menu-item a", function(e) {
  3.     // 如果链接指向外部URL或锚点，允许默认行为
  4.     if ($(this).attr("href").indexOf("http") === 0 || $(this).attr("href").indexOf("#") === 0) {
  5.         return;
  6.     }
  7.    
  8.     // 阻止默认行为
  9.     e.preventDefault();
  10.    
  11.     // 其他点击事件处理代码
  12. });
复制代码

4. 搜索功能不工作

问题：菜单搜索功能不工作或搜索结果不准确。

解决方案：

首先，确保搜索输入框和按钮的HTML结构正确：
  2. <div class="menu-search">
  3.     <input type="text" id="menu-search-input" placeholder="搜索菜单...">
  4.     <button id="menu-search-button"><i class="fas fa-search"></i></button>
  5. </div>
复制代码

然后，检查搜索功能的JavaScript代码是否正确实现：
  2. $("#menu-search-input").on("keyup", function() {
  3.     var searchTerm = $(this).val().toLowerCase();
  4.    
  5.     if (searchTerm === "") {
  6.         // 如果搜索框为空，显示所有菜单项
  7.         $("#menu .ui-menu-item").removeClass("search-result no-search-result").show();
  8.         $("#menu .ui-menu").show();
  9.     } else {
  10.         var found = false;
  11.         
  12.         // 遍历所有顶级菜单项
  13.         $("#menu > .ui-menu-item").each(function() {
  14.             var menuItem = $(this);
  15.             var menuText = menuItem.text().toLowerCase();
  16.             
  17.             if (menuText.includes(searchTerm)) {
  18.                 // 如果菜单项包含搜索词，显示该菜单项及其所有子菜单
  19.                 menuItem.removeClass("no-search-result").addClass("search-result").show();
  20.                 menuItem.find(".ui-menu").show();
  21.                 menuItem.find(".ui-menu-item").removeClass("no-search-result").show();
  22.                 found = true;
  23.             } else {
  24.                 // 检查子菜单是否包含搜索词
  25.                 var subMenuFound = false;
  26.                
  27.                 menuItem.find(".ui-menu-item").each(function() {
  28.                     var subMenuItem = $(this);
  29.                     var subMenuText = subMenuItem.text().toLowerCase();
  30.                     
  31.                     if (subMenuText.includes(searchTerm)) {
  32.                         subMenuItem.removeClass("no-search-result").show();
  33.                         subMenuFound = true;
  34.                         found = true;
  35.                     } else {
  36.                         subMenuItem.removeClass("search-result").addClass("no-search-result").hide();
  37.                     }
  38.                 });
  39.                
  40.                 if (subMenuFound) {
  41.                     menuItem.removeClass("no-search-result").show();
  42.                     menuItem.find(".ui-menu").show();
  43.                 } else {
  44.                     menuItem.removeClass("search-result").addClass("no-search-result").hide();
  45.                     menuItem.find(".ui-menu").hide();
  46.                 }
  47.             }
  48.         });
  49.         
  50.         // 如果没有找到任何匹配项，显示一条消息
  51.         if (!found) {
  52.             if ($("#no-search-result").length === 0) {
  53.                 $("#menu").append('<li class="ui-menu-item no-search-result" id="no-search-result"><a>没有找到匹配的菜单项</a></li>');
  54.             }
  55.         } else {
  56.             $("#no-search-result").remove();
  57.         }
  58.     }
  59. });
复制代码

如果问题仍然存在，尝试在搜索功能的代码中添加一些调试信息，以确定问题所在：
  2. $("#menu-search-input").on("keyup", function() {
  3.     var searchTerm = $(this).val().toLowerCase();
  4.     console.log("搜索词:", searchTerm);
  5.    
  6.     // 其他代码...
  7. });
复制代码

5. 固定位置导航导致内容被遮挡

问题：当导航菜单设置为固定位置时，页面内容被导航菜单遮挡。

解决方案：

这个问题通常是由于没有为内容区域设置足够的左边距导致的。检查并修改CSS样式：
  2. .content.with-fixed-menu {
  3.     margin-left: 250px; /* 这应该与导航菜单的宽度相同 */
  4. }
  6. /* 响应式调整 */
  7. @media (max-width: 768px) {
  8.     .content.with-fixed-menu {
  9.         margin-left: 0; /* 在小屏幕设备上不需要左边距 */
  10.     }
  11.    
  12.     .vertical-menu.fixed {
  13.         width: 100%;
  14.         height: auto;
  15.         max-height: 50vh;
  16.     }
  17. }
复制代码

如果问题仍然存在，可能需要调整内容区域的内边距：
  2. .content {
  3.     padding: 30px;
  4.     box-sizing: border-box;
  5. }
  7. .content.with-fixed-menu {
  8.     margin-left: 250px;
  9.     padding-left: 30px; /* 确保内容不会被导航菜单遮挡 */
  10. }
复制代码

总结与最佳实践

在本教程中，我们从零开始，手把手地学习了如何使用jQuery UI创建一个响应式、交互式的垂直导航菜单。我们涵盖了从准备工作到高级功能的各个方面，并解决了一些常见问题。

主要成果

通过本教程，我们实现了以下功能：

1. 创建了一个基本的多级垂直导航菜单结构
2. 使用CSS样式美化了导航菜单的外观
3. 使用jQuery UI添加了交互功能
4. 实现了响应式设计，使导航菜单适应不同设备的屏幕尺寸
5. 添加了搜索功能，帮助用户快速找到所需内容
6. 实现了固定位置导航，使用户在滚动页面时仍能访问导航菜单
7. 添加了平滑滚动效果，提升用户体验
8. 实现了活动菜单项指示器，帮助用户了解当前位置

最佳实践

在开发jQuery UI垂直导航菜单时，以下是一些最佳实践：

1. 语义化HTML：使用适当的HTML标签（如<nav>、<ul>、<li>）创建导航菜单的结构，提高代码的可读性和可访问性。
2. 模块化CSS：将CSS样式组织成模块，便于维护和扩展。使用类名来标识不同的组件和状态。
3. 性能优化：避免使用过多的动画效果，以免影响页面性能。对于大型菜单，考虑使用延迟加载技术。
4. 可访问性：确保导航菜单对所有用户都可访问，包括使用屏幕阅读器的用户。使用ARIA属性提高可访问性。
5. 移动优先：采用移动优先的设计方法，首先为小屏幕设备设计导航菜单，然后逐步增强以适应更大的屏幕。
6. 用户测试：在发布之前，进行用户测试，确保导航菜单易于使用和理解。

语义化HTML：使用适当的HTML标签（如<nav>、<ul>、<li>）创建导航菜单的结构，提高代码的可读性和可访问性。

模块化CSS：将CSS样式组织成模块，便于维护和扩展。使用类名来标识不同的组件和状态。

性能优化：避免使用过多的动画效果，以免影响页面性能。对于大型菜单，考虑使用延迟加载技术。

可访问性：确保导航菜单对所有用户都可访问，包括使用屏幕阅读器的用户。使用ARIA属性提高可访问性。

移动优先：采用移动优先的设计方法，首先为小屏幕设备设计导航菜单，然后逐步增强以适应更大的屏幕。

用户测试：在发布之前，进行用户测试，确保导航菜单易于使用和理解。

扩展功能

如果你想要进一步扩展导航菜单的功能，可以考虑以下方向：

1. 添加面包屑导航：在页面顶部添加面包屑导航，帮助用户了解他们在网站中的位置。
2. 实现拖放排序：使用jQuery UI的Sortable组件，允许管理员通过拖放来重新排序菜单项。
3. 添加动画效果：使用CSS3动画或jQuery动画，为菜单项添加更多的动画效果，如淡入淡出、滑动等。
4. 实现多语言支持：为导航菜单添加多语言支持，使网站能够适应不同语言的用户。
5. 添加用户权限控制：根据用户角色和权限，动态显示或隐藏特定的菜单项。

添加面包屑导航：在页面顶部添加面包屑导航，帮助用户了解他们在网站中的位置。

实现拖放排序：使用jQuery UI的Sortable组件，允许管理员通过拖放来重新排序菜单项。

添加动画效果：使用CSS3动画或jQuery动画，为菜单项添加更多的动画效果，如淡入淡出、滑动等。

实现多语言支持：为导航菜单添加多语言支持，使网站能够适应不同语言的用户。

添加用户权限控制：根据用户角色和权限，动态显示或隐藏特定的菜单项。

通过本教程，你已经学会了如何从零开始创建一个功能丰富、响应式的jQuery UI垂直导航菜单。这个导航菜单不仅美观，而且功能强大，可以大大提升网站的用户体验和专业性。希望这个教程对你有所帮助，祝你在网站开发的道路上取得成功！
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
次元宅社
次元宅社
开放、共创，CHANGE SEKAI！
频道订阅

频道订阅

加入社群

加入社群

联系我们|TG频道|RSS

Powered by Pixtech

© 2025 Pixtech Team.