How to implement the hierarchical display of custom navigation menus in Anqi CMS templates?

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

Backend settings for custom navigation menus

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

In the background management interface, find the 'Background Settings' menu under the 'Navigation Settings' option.This is the core area for managing all navigation links on the website. The system has a default "default navigation" category, which you can edit on this basis, or create a new navigation category, 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, several key settings determine their hierarchical relationship:

• 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).Select the appropriate link type to direct navigation to the correct content.
• Parent navigationThis is the key to achieving hierarchical display. If a navigation link is a top-level menu item, select 'Top-level navigation'.If it is a sub-menu item, you need to select its parent navigation from the dropdown list.The AnQiCMS 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 orderYou can control the order of navigation links by setting numbers, the smaller the number, the earlier it is displayed.
• Subheading nameandNavigation descriptionThese fields can provide additional text information for navigation, making it convenient to display more rich content in templates, such as showing a Chinese title while also displaying an English subtitle.

By setting above, you can build a clear second-level navigation structure, such as: Home, About Us (main menu), Products (main menu) - > Product Category A (second-level menu), Product Category B (second-level menu), News (main menu), etc.

The template calls and displays the 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 exampleheader.htmlorbase.html), you can usenavListTag to get navigation data. This tag will return an array object containing all navigation items, each of which may contain a namedNavListThe child array is used to store the sub-menus.

A typical call 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 %}Retrieved all navigation menus configured on the backend and assigned them tonavsVariable.
2. The outermost{% for item in navs %}The loop iterates over all top-level navigation menu items.
   • item.Linkanditem.TitleUsed to display the links and text of the top-level menu.
   • {% if item.IsCurrent %}active{% endif %}Can be used to determine whether the current page being accessed matches the navigation item, thereby addingactiveClass name, to achieve the style highlighting of the selected state.
   • {% if item.NavList %}Is the key to determine whether the current top-level menu item has a submenu. If it existsNavListIt indicates that it has a lower-level menu.
3. Inner layers.{% for inner in item.NavList %}It loops through all the submenus of the current top-level menu item.
   • inner.Linkandinner.TitleUsed to display the link and text of the submenu.

By such a structure, you can flexibly use CSS styles to control the layout of the top-level menu and its submenus, such as using float, positioning, or Flexbox/Grid to implement dropdown menus, sidebar expansion, and other visual effects. You can customize it according to your website design needs, formain-navandsubmenuAdd the corresponding class name and style.

Expand applications and注意事项

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

Points to note:

• The navigation menu of AnQi CMS currently supports two levels, if your website design needs a deeper navigation structure, you may need to consider building it through content categories or single pages, and manually calling it in the templatecategoryListnested with tags instead of relyingnavListthe automatic hierarchy function.
• item.IsCurrentThe property is the key to implementing the "selected" navigation state, ensuring that your CSS can correctly identify and render this state, providing users with clear visual feedback.
• When modifying templates, it is recommended to back up the original template first and perform tests in a test environment to avoid unnecessary impact on the online website.

By flexibly using the background navigation settings and in the templatenavListA clever combination of labels, you will be able to build a fully functional, well-structured and user-friendly navigation system for your AnQiCMS website.

Frequently Asked Questions (FAQ)

1. Does AnQiCMS navigation menu support three or more levels?The built-in navigation menu feature of AnQiCMS is designed to support up to two levels of hierarchy display (i.e., a top-level menu item can contain one level of submenus). If your website requires a deeper navigation structure, consider combining content categories (categoryListLabels) and custom template logic to implement, but this requires more complex template code to manually construct multi-level nested relationships.

How to set the navigation menu to display submenus only on mouse hover?This is mainly implemented through CSS and a small amount of JavaScript. You can output navigation according to the two-level list HTML structure in the template (such as<ul><li><a></a><ul class="submenu">...</ul></li></ul>），then use CSS (for exampledisplay: none;anddisplay: block;cooperate:hoverpseudo-classes) to control the submenu.submenuThe display and hide. 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 hot products under a specific category in the navigation dropdown menu?Yes, it is achievable. In the template, when a certain navigation item has a submenu or is associated with a category (viaitem.PageIdGet category ID), you can use it nested within the submenu area of the navigation itemarchiveListorcategoryListUse tags to retrieve and display the corresponding latest articles, popular products, or subcategory lists. For example, add one inside the sub-menu.<li>Add another one inside.archiveListUse a loop to display article titles.