To successfully set up a multi-level dropdown menu, we need to combine the backend navigation configuration with the frontend template tags call.
Step 1: Understand the data structure of the navigation list in AnQi CMS and the background configuration.
In AnQi CMS, to build a multi-level dropdown menu, you first need to start with the navigation settings in the background. Enter the background's...后台设置-网站导航设置Page, you will see导航类别管理and导航链接设置Two core areas.
1. Navigation category management:系统默认提供一个“默认导航”类别，您可以根据实际需求，如“主导航”、“页脚导航”或“侧边栏导航”，通过自定义导航类别来创建新的导航组。The advantages of doing this are that independent management and invocation can be carried out for the navigation of different areas of the website.
2. Navigation link settings:This is the place to create specific navigation menu items. Each navigation link carries specific information, such as the displayed name, link address, and so on.
- Display name and subtitle name/navigation description:These fields allow you to set friendly display text for navigation items, and you can even add auxiliary subtitles or descriptions to provide more information.
- Link type:English CMS supports multiple link types, including links to core pages within the site,
内置链接(such as the home page, model home page), and links to specific pages.分类页面链接(Article category, product category, or single page), as well as fully customizable外部链接. This greatly increases the flexibility of navigation. - Parent Navigation:This is the key to implementing multi-level menus. When you need to create a second-level menu item, just
上级导航Set it to the corresponding top-level menu. For example, if you create a top-level navigation named “Product Center”, then you can create “Product A”, “Product B”, and so on as second-level navigations, and set them to be the corresponding ones.上级导航The product center is specified. - Display Order:By adjusting the numbers of the display order, you can control the arrangement of navigation items at the same level, with smaller numbers appearing earlier.
It should be noted that the Anqi CMS currently supports a navigation list of up to two levels by default.This means you can create a first-level menu and its second-level sub-menus, but does not support three or more nested levels.
第二步：Master the navigation list tagsnavListUsage
After the background navigation structure is configured, the next step is to display it in the front-end template throughnavListtags.navListThe label is a powerful tool provided by AnQi CMS, used to fetch and cyclically output the navigation data configured in the background.
The basic usage method is as follows:
{% navList navs %}
{# 循环输出一级导航项 #}
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 判断是否存在二级导航，并循环输出 #}
{%- if item.NavList %}
<dl>
{%- for inner in item.NavList %}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
In this code block:
{% navList navs %}Declared to assign the navigation data obtained to a variable namednavs.{%- for item in navs %}Used to iterate over all first-level navigation items.itemThe variable represents the current first-level navigation object.item.Title: Display the name of the navigation item.item.LinkNavigation item link address.item.IsCurrentAn English boolean value indicating whether the current navigation item is a link to the current page, often used for addingactiveClass to highlight.
{%- if item.NavList %}Is the key to determine whether the current first-level navigation item contains a submenu.item.NavListExists, indicating there is a secondary navigation.{%- for inner in item.NavList %}Used to iterate over all secondary navigation items under the current primary navigation.innerThe variable represents the current secondary navigation object, which also hasTitle/Link/IsCurrentsuch properties.
If you have created multiple navigation categories in the background, you can access them bytypeIdspecifying a parameter to call a specific navigation group, for example:{% navList navs with typeId=2 %}.
Step 3: Practical Cases and Advanced Applications
To better displaynavListLabel flexibility, the following provides several practical cases to help you build different forms of multi-level dropdown menus.
Case one: Build a simple two-level standard dropdown menu
This menu is usually used at the top of the website, and the sub-menu below will expand when the mouse hovers over the first-level menu.
<nav class="main-nav">
<ul class="nav-list">
{% navList navs with typeId=1 %} {# 假设typeId=1是主导航 #}
{%- for item in navs %}
<li class="nav-item {% if item.NavList %}has-dropdown{% endif %} {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="dropdown-menu">
{%- for inner in item.NavList %}
<li class="dropdown-item {% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
This structure needs to be paired with CSS to control the display/hide of the dropdown menu (for example, using:hover), as well as JavaScript to implement more complex interactive effects.
Example two: Display document list under category in the navigation dropdown menu
In some scenarios, you may want the secondary menu to not only be links but to directly display the latest articles or products under a category. This can be achieved by in thenavListinternal combinationarchiveListtags to achieve this.
<nav class="main-nav">
<ul class="nav-list">
{% navList navs with typeId=1 %}
{%- for item in navs %}
<li class="nav-item {% if item.NavList %}has-dropdown{% endif %} {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="dropdown-menu">
{%- for inner in item.NavList %}
<li class="dropdown-item">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{# 如果二级导航是分类页面，且存在对应的PageId，则可以调用该分类下的文档 #}
{% if inner.PageId > 0 %}
{% archiveList products with type="list" categoryId=inner.PageId limit="5" %}
{% if products %}
<ul class="category-products">
{% for product in products %}
<li><a href="{{product.Link}}">{{product.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
Here,inner.PageIdIt is crucial, it will obtain the ID associated with the category or single page of the secondary navigation. We use this ID toarchiveListfilter out the articles or products under the corresponding category.
Case three: Display the subcategory list under the navigation dropdown menu
If you want the secondary menu to display all subcategories under a specific primary category instead of specific documents, you can combinecategoryListLabel.
`