How to build a multi-level dropdown menu and display the navigation list tags in AnQiCMS?
The website navigation serves as the core entry point for users to explore the website content, and its structural design directly affects user experience and the efficiency of information acquisition.Especially multi-level drop-down menus can effectively organize a large amount of information, making the website structure clearer and more hierarchical.In AnQi CMS, building and displaying such a multi-level navigation system is both flexible and intuitive.
To successfully build a multi-level dropdown menu, we need to combine the backend navigation configuration with the frontend template tag calls.
The first step is to understand the data structure of the Anqi CMS navigation list 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后台设置-u003e网站导航设置Page, you will see导航类别管理and导航链接设置Two core areas.
1. Navigation category management:The system provides a default "default navigation" category, and you can create new navigation groups according to your actual needs, such as "main navigation", "footer navigation", or "sidebar navigation", by customizing the navigation categories.The benefit of doing this is that it can be managed and called independently 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, etc.
- Display Name and Subtitle Name/Navigation Description:These fields allow you to set friendly display text for navigation items, and even add auxiliary subtitles or descriptions to provide more rich information.
- Link Type:The AnQi CMS supports various link types, including links to core pages within the site
内置链接(such as the homepage, model homepage), and links to specific pages分类页面链接(Article category, product category, or single page), and fully customizable外部链接. This greatly enhances the flexibility of navigation. - Parent navigation:This is the key to implementing a multi-level menu. When you need to create a second-level menu item, just
上级导航Set it as the corresponding top-level menu. For example, if you create a top-level navigation named "Product Center", you can then create secondary navigations such as "Product A", "Product B", and so on, and set their上级导航Be specified as "Product Center". - Display order:By adjusting the display order number, you can control the arrangement position of navigation items at the same level, the smaller the number, the closer to the front.
It should be noted that AnQi CMS currently supports up to two-level navigation lists by default.This means you can create a first-level menu and its second-level sub-menus, but not support three or more nested levels.
Second step: Master the navigation list labelnavListUsage of
After the background navigation structure is configured, the next step is to use the template in the front-endnavListlabel to display it.navListThe tag is a powerful tool provided by Anqi CMS, used to retrieve and loop output the navigation data configured on the backend.
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 the navigation data obtained and assigned 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: Displays the name of the navigation item.item.Link: The link address of the navigation item.item.IsCurrentA boolean value indicating whether the current navigation item is a link to the current page, commonly used to addactiveto highlight the class.
{%- if item.NavList %}Is the key to determine whether the current top-level navigation item contains a submenu. Ifitem.NavListIf present, it indicates the existence of secondary navigation.{%- for inner in item.NavList %}Used to iterate over all secondary navigation items under the current primary navigation item.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 cantypeIdspecify a parameter to call a specific navigation group, for example:{% navList navs with typeId=2 %}.
Third step: 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 secondary menu under it 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 combined with CSS to control the display/hide of the dropdown menu (for example, using:hover), and JavaScript to implement more complex interactive effects.
Case two: Displaying the document list under the category in the navigation dropdown menu
In certain scenarios, you may want the secondary menu to be more than just links, but to directly display the latest articles or products under a specific category. This can be achieved by integratingnavListinternallyarchiveListthe tag.
<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 of the category or single page associated with the secondary navigation. We use this ID toarchiveListfilter out the articles or products under the corresponding category.
Case three: Displaying the subcategory list in the navigation dropdown menu
If you want the secondary menu to display all subcategories under a primary category instead of specific documents, you can combinecategoryList.
`