在网站运营中，清晰高效的导航系统是用户体验的关键，也是搜索引擎优化的重要一环。AnQiCMS 提供了灵活的导航设置功能，让网站管理者可以轻松创建和管理多级导航菜单，其中包括支持二级下拉菜单的功能。接下来，我们将一起了解如何在 AnQiCMS 中实现这一目标。
第一步：在后台配置导航链接
首先，您需要登录 AnQiCMS 的后台管理界面，进入导航设置模块。
管理导航类别 AnQiCMS 允许您为网站的不同区域创建独立的导航菜单。系统默认会有一个“默认导航”类别，通常用于网站的主菜单。如果您希望在网站的其他位置（例如页脚或侧边栏）也设置不同的导航，可以点击“自定义导航类别”新增一个类别，比如命名为“页脚导航”或“产品导航”。这样，您可以为每个区域配置专属的菜单，保持网站内容的整洁和有序。
创建一级导航项 在您选择的导航类别下，开始添加一级导航链接。这些是一级菜单项，它们将直接显示在网站的导航栏上。
- 上级导航： 首次添加一级导航时，请选择“顶级导航”，这表示它没有上级菜单，是独立的。
- 显示名称： 填写用户将在网站上看到的导航名称，例如“产品与服务”、“关于我们”、“新闻中心”等。
- 链接类型： AnQiCMS 提供了多种链接类型供您选择：
- 内置链接： 包含首页、文章模型首页、产品模型首页等，方便快捷地指向系统内置页面。
- 分类页面链接： 您可以选择已创建的文章分类、产品分类或单页面作为导航链接，例如指向“公司介绍”单页或“行业新闻”分类。
- 外部链接： 灵活地添加任何站内或站外链接，满足您的个性化需求。
- 显示顺序： 通过设置数字来控制导航项的排列顺序，数字越小，显示越靠前。
添加二级下拉菜单项 要创建支持二级下拉菜单的多级导航，关键在于将新的导航项指定到其对应的一级导航下。
- 上级导航： 在添加二级导航时，不再选择“顶级导航”，而是从下拉列表中选择您已经创建好的对应一级导航项。例如，如果您的“产品与服务”是一级导航，那么“解决方案”、“产品案例”等就可以选择“产品与服务”作为其上级导航。
- 显示名称、链接类型、显示顺序： 这些设置与创建一级导航项类似，根据您的实际需求填写即可。通过这种方式，您可以为每个一级导航项配置多个二级下拉子菜单。
第二步：在网站模板中展示导航
后台配置完成后，您需要在网站的前端模板文件中调用这些导航数据，使其在网站上实际显示出来。AnQiCMS 的模板系统使用 navList 标签来完成这项任务。
通常，导航菜单的调用代码会放在网站模板的公共头部文件（例如 partial/header.html 或 base.html）中。
下面是一个在 AnQiCMS 模板中展示支持二级下拉菜单的导航示例代码：
{% navList navs with typeId=1 %} {# typeId=1 通常指代默认导航，如果创建了其他导航类别，请替换为对应的ID #}
<ul class="main-nav"> {# 主菜单的UL标签，您可以根据自己的CSS命名 #}
{%- for item in navs %} {# 遍历所有一级导航项 #}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}"> {# 为当前活跃的导航项添加active类 #}
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 检查当前一级导航项是否有子导航（二级菜单） #}
<ul class="sub-nav"> {# 二级下拉菜单的UL标签 #}
{%- for inner in item.NavList %} {# 遍历二级导航项 #}
<li class="sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
代码解析：
{% navList navs with typeId=1 %}：这是 AnQiCMS 调用导航列表的标签。navs是您为导航数据定义的变量名，typeId=1表示调用 ID 为 1 的导航类别（通常是默认导航）。如果您创建了其他导航类别，请将typeId更改为相应的 ID。{%- for item in navs %}：这个循环会遍历您后台配置的所有一级导航项，item变量代表每一个一级导航项。{{ item.Link }}和{{ item.Title }}：分别输出一级导航的链接地址和显示名称。{% if item.IsCurrent %}active{% endif %}：这是一个条件判断，如果当前页面与该导航项匹配，会自动添加active类，便于通过 CSS 高亮显示当前页面所属的导航。{%- if item.NavList %}：这是创建二级下拉菜单的关键。item.NavList会包含当前一级导航项的所有子导航（即您在后台配置的二级导航）。如果item.NavList存在，说明该一级导航有下拉菜单。<ul class="sub-nav">和{%- for inner in item.NavList %}：在这里，您可以创建一个新的<ul>标签来包裹二级菜单项，并用inner变量遍历item.NavList中的每一个二级导航项。- CSS 和 JavaScript： 请注意，上述代码主要负责输出导航的 HTML 结构。要实现真正的“下拉菜单”效果，您还需要编写相应的 CSS 样式来控制二级菜单的隐藏和显示，可能还会结合 JavaScript 来增强交互体验，例如鼠标悬停时显示下拉菜单。
优化导航体验的建议
- 保持简洁： 避免过深的菜单层级，AnQiCMS 默认支持两级已经足够满足大多数网站的需求，过多的层级会让用户迷失。
- 清晰的命名： 导航名称应直观明了，让用户一眼就能理解其指向的内容。
- 测试兼容性： 在不同设备（PC、手机、平板）和不同浏览器上测试您的导航菜单，确保其显示和功能正常。
- 可访问性： 考虑为导航菜单添加 ARIA 属性，提升对屏幕阅读器等辅助技术用户的友好度。
通过以上步骤，您就可以在 AnQiCMS 网站中成功创建并展示支持二级下拉菜单的多级导航，为您的网站访客提供更便捷、更友好的浏览体验。
常见问题 (FAQ)
1. AnQiCMS 是否支持创建三级或更多级的下拉菜单？
目前 AnQiCMS 的导航列表功能默认支持最多两级导航链接，即一个一级菜单项下可以包含一个二级下拉菜单。如果您需要更深层次的菜单，可能需要通过自定义模板标签或结合前端 JavaScript 进行更复杂的实现，但这超出了系统内置导航设置的范畴。
2. 我配置了多个导航类别（如主导航、页脚导航），如何在模板中分别调用它们？
在后台的导航类别管理中，每个导航类别都会有一个唯一的 ID。在模板中使用 navList 标签时，您可以通过 typeId 参数来指定要调用的导航类别。例如，如果您的主导航 ID 是 1，页脚导航 ID 是 2，那么在调用时可以分别使用 {% navList mainNavs with typeId=1 %} 和 {% navList footerNavs with typeId=2 %}。
3. 我的二级下拉菜单在 PC 端显示正常，但在移动端却无法下拉展开，是什么原因？
这通常是由于移动端和 PC 端对下拉菜单的交互逻辑和样式处理方式不同造成的。PC 端常用鼠标悬停触发下拉，而移动端通常需要点击才能展开。您需要检查负责下拉菜单显示/隐藏的 CSS 和 JavaScript 代码，确保它们能够正确响应移动端的点击事件或触摸手势。AnQiCMS