Implementing hierarchical display of custom navigation menus in the Anqi CMS is an important step to enhance website user experience and content organization.AnQiCMS provides flexible backend configuration and powerful template tags, allowing users to easily build clear, easy-to-navigate multi-level menu.

Backend settings for custom navigation menus

To implement the hierarchical display of the navigation menu, you first need to make the corresponding settings in the AnQiCMS backend.

In the background management interface, find the 'Navigation Settings' option under the 'Background Settings' menu.This is the core area of all navigation links of the management website.System default will have a "Default Navigation" category, you can choose to edit on this basis, or create a new navigation category through the "Navigation Category Management" feature, such as "Footer Navigation" or "Sidebar Navigation", to meet the display needs of different areas.

After entering a specific navigation category, you can add new navigation links. When adding or editing navigation links, there are several key settings that determine their hierarchical relationships:

  • Display NameThis is the text displayed on the front page navigation link, you can name it freely as needed.
  • Link Type：AnQiCMS supports three types of links: built-in links (such as the homepage), category page links (selecting existing articles or product categories), and external links (can link to any URL within or outside the site).Choose the appropriate link type to direct navigation to the correct content.
  • Parent NavigationThis is the key to implementing hierarchical display.If a navigation link is a top-level menu item, select "Top-level navigation".If it is a submenu item, you need to select its parent navigation from the dropdown list.AnQiCMS's navigation system currently supports up to two levels of menus, that is, a top-level menu item can contain one level of sub-menus.
  • Display OrderEnglish: You can control the order of navigation links by setting numbers; the smaller the number, the earlier it is displayed.
  • Subtitle nameandNavigation descriptionThese fields can provide additional text information for navigation, making it easier to display more rich content in templates, such as showing a Chinese title and an English subtitle at the same time.

Through the above settings, you can build a clear secondary navigation structure, such as: Home, About Us (primary menu), Products (primary menu) -> Product Category A (secondary menu), Product Category B (secondary menu), News (primary menu), etc.

Template calls and displays hierarchical navigation

After completing the navigation menu settings in the background, the next step is to call these data in the website template and display them hierarchically. AnQiCMS providesnavListTag to get navigation list data.

First, in your template file (for example,header.htmlorbase.htmlInyou can usenavListLabel fetches navigation data. This label will return an array object containing all navigation items, each of which may contain a name calledNavListAn array, used to store its subordinate menus.

A typical calling structure is as follows:

{% navList navs %}
<nav>
    <ul class="main-nav">
        {%- for item in navs %}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}" {% if item.NavList %}class="has-submenu"{% endif %}>
                {{ item.Title }}
                {% if item.SubTitle %}<span>{{ item.SubTitle }}</span>{% endif %}
            </a>
            {%- if item.NavList %}
            <ul class="submenu">
                {%- for inner in item.NavList %}
                <li class="submenu-item {% if inner.IsCurrent %}active{% endif %}">
                    <a href="{{ inner.Link }}">
                        {{ inner.Title }}
                        {% if inner.SubTitle %}<span>{{ inner.SubTitle }}</span>{% endif %}
                    </a>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</nav>
{% endnavList %}

In the above code example:

  1. {% navList navs %}Obtained all the navigation menus from the backend configuration and assigned it tonavsa variable.
  2. the outermost{% for item in navs %}It loops through all the top-level navigation menu items.
    • item.Linkanditem.TitleUsed to display links and text for top-level menus.
    • {% if item.IsCurrent %}active{% endif %}Can be used to determine if the current page being accessed matches the navigation item, so that it can be addedactivea class name to implement style highlighting for the selected state.
    • {% if item.NavList %}Is the key to determine whether the current top-level menu item has a submenu.NavListIf so, it means it has a sub-menu.
  3. inner layers of the{% for inner in item.NavList %}It loops through all the sub-menus of the current top-level menu item.
    • inner.Linkandinner.TitleUsed to display the links and text of the sub-menu.

Through such a structure, you can flexibly use CSS styles to control the layout of the top-level menu and sub-menus, such as using floating, positioning, or Flexbox/Grid to achieve visual effects like dropdown menus and sidebar expansion. You can customize the layout to meet your website design requirements,main-navandsubmenuAdd the corresponding class name and style.

Expand the application and注意事项

In addition to simple link display, you can also combine other tags to achieve a richer navigation experience. For example, if your navigation submenu points to a category,inner.PageId(If the submenu is associated with a category page) to get the list of popular articles or products under the category, directly display them in the dropdown menu, further improving the efficiency of users reaching content. This intag-/anqiapi-other/165.htmlThe document example illustrates this, that is, product documents or subcategory lists are displayed in the dropdown menu.

Precautions:

  • The navigation menu of Anqi CMS currently supports two levels. If your website design requires a deeper navigation structure, you may need to consider building through content categories or single pages, and manually calling it in the template.categoryListTags are nested in multiple layers rather than depending onnavListthe automatic level feature.
  • item.IsCurrentThe property is the key to implementing the "selected" state for navigation, ensuring that your CSS can correctly identify and render this state, providing clear visual feedback to the user.
  • When modifying templates, it is recommended to back up the original template first and test in a test environment to avoid unnecessary impact on the online website.

Through the flexible use of backend navigation settings and templates innavListThe clever combination of tags will allow you to build a complete, well-structured, and user-friendly navigation system for your AnQiCMS website.

Common Questions (FAQ)

1. Does AnQiCMS navigation menu support three-level or more menus?Currently, the built-in navigation menu function of AnQiCMS is designed to support up to two levels of hierarchy display (i.e., a top-level menu item can contain a layer of submenus). If your website needs a deeper navigation structure, consider using content categories in combination.categoryListLabels) and custom template logic to implement, but this requires more complex template code to manually build multi-layered nested relationships.

2. How to set the navigation menu to display submenus only on mouse hover?This is mainly achieved through CSS and a small amount of JavaScript. You can output the navigation in the template according to the two-level list HTML structure (such as<ul><li><a></a><ul class="submenu">...</ul></li></ul>），then use CSS (for exampledisplay: none;anddisplay: block;with:hoverpseudo-classes) to control the submenu.submenuThe display and hide of ）.For more complex interactions, such as fade-in and fade-out effects or to avoid issues with touch devices, it may be necessary to introduce JavaScript libraries (such as jQuery) to assist.

3. Can I directly display the latest articles or popular products under a certain category in the navigation dropdown menu?Yes, it is achievable. In the template, when a navigation item has a submenu or is associated with a category (item.PageIdRetrieve category ID), you can use it nested within the submenu area of this navigation itemarchiveListorcategoryListUsing tags to retrieve and display the corresponding latest articles, popular products, or subcategory lists. For example, in the sub-menu,<li>an additionalarchiveListloop to display article titles.