How to create a multi-level website navigation menu in AnQiCMS template?

As an experienced AnQiCMS website operator, I know that a clear and efficient multi-level website navigation menu is crucial for user experience and website SEO.AnQiCMS provides a comprehensive mechanism for template design and backend management, making it easy for us to build such a menu.Next, I will elaborate on how to create a multi-level website navigation menu in the AnQiCMS template.

The website navigation is a map for users to browse the website. A well-designed multi-level navigation can effectively guide users to find the information they need and improve the usability of the website.AnQiCMS system is built with powerful navigation management functions, and is supported by flexible template tags, making it simple and direct to create and maintain complex navigation structures.

Set multi-level navigation in the background management

In the AnQiCMS backend, the navigation settings are the foundation for building multi-level menus. First, we need to enter the 'Backend Settings' under the 'Navigation Settings' page.

The system will provide a default "default navigation" category, but you can also create multiple navigation categories as needed, such as "main navigation", "footer navigation", or "sidebar navigation", which is realized through the "navigation category management" feature.Each navigation category can independently manage the navigation links under it, providing great flexibility for navigation in different areas of the website.

In the specific 'navigation link settings', we can define the properties of each navigation item.To create a multi-level navigation, the key is to choose the "parent navigation".When you add a new navigation link:

• Create a first-level navigation:Set the 'Parent Navigation' to 'Top Level Navigation'.
• Create secondary navigation:Select an existing top-level navigation as its 'Parent Navigation'.

AnQiCMS currently supports up to two-level navigation links, that is, a first-level navigation can contain a second-level dropdown menu.For each navigation link, you can set its "display name", "subtitle name", and "navigation description", which information can be called in the front-end template.The link type also provides a variety of choices, including "internal links" pointing to content within the website, "category page links", or "external links" pointing to resources outside the website.In addition, the 'Display Order' field allows you to finely control the arrangement of navigation items.

Implement multi-level navigation rendering in the template.

Once the navigation structure is configured in the background, the next step is to render it in the front-end template. AnQiCMS providesnavListtags, which are the core tools for implementing the navigation menu.

We usually place the code snippet of the navigation menu in the template.partial/in the directory, for examplepartial/header.htmlThen proceed{% include "partial/header.html" %}This modular design helps in code reuse and maintenance.

Inpartial/header.htmlIn the (or other navigation template file) usenavListtags to obtain the navigation data set in the background. If you have created multiple navigation categories in the background, you can navigate throughtypeIdSpecify the navigation category to be called, for example{% navList navs with typeId=1 %}Indicates the navigation category called with ID 1 (usually the default navigation).

navListThe tag will treat navigation data as an array object, such asnavsReturn. To render a multi-level menu, we need to use nestedforloop to iterate through this array:

<ul>
    {% navList navs with typeId=1 %} {# 假设typeId=1是主导航 #}
    {%- for item in navs %}
        {# 判断当前导航项是否为活跃状态，添加active类名 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 检查是否存在下级导航 #}
            <ul class="submenu"> {# 二级导航菜单容器 #}
                {%- for inner in item.NavList %}
                    <li class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
    {% endnavList %}
</ul>

In this example:

• The outermost{% for item in navs %}Loop through all first-level navigation items
• item.IsCurrentVariables can be used to determine whether the current navigation item is the page the user is visiting, making it convenient to addactiveCSS classes to highlight.
• item.Linkanditem.TitleUsed to output the link address and display name of the navigation item.
• {%- if item.NavList %}It is a key conditional judgment that checks whether the current first-level navigation item contains sub-navigation.NavListIsitemThe object contains an array of second-level navigation items.
• If there is a sub-navigation, it is nested.{%- for inner in item.NavList %}The loop will traverse all secondary navigation items and output their links and titles as well.

In this way, we can dynamically render the multi-level navigation menu configured on the back-end in the front-end template.

Key considerations

When creating multi-level navigation menus, in addition to the above steps, there are some practices and precautions:

• Level limit:Remember that AnQiCMS currently supports up to two levels of navigation. If your website needs a deeper navigation hierarchy, you may need to consider combining other content list tags such ascategoryListorarchiveList) to simulate a deeper level of content display, rather than a pure navigation menu structure.
• Modular:Make full use ofincludeThe tag divides navigation code into reusable small modules. This not only makes the template code neater, but also facilitates team collaboration and maintenance.
• Responsive design:Considering the experience of mobile device users, it is necessary to cooperate with CSS and JavaScript for responsive multi-level navigation, ensuring that it can be displayed and interacted with well on different screen sizes.
• Cache Update:After modifying the navigation settings in the background, if the front-end does not update in time, please remember to clear the system cache to ensure that the latest configuration takes effect.

By using AnQiCMS's flexible backend configuration and powerful template tags, we can effectively build a multi-level website navigation menu that is both beautiful and practical, thereby enhancing user experience and the overall efficiency of the website.

Frequently Asked Questions

Q1: How many levels does AnQiCMS navigation menu support?

The AnQiCMS backend navigation settings support up to two-level navigation menus, that is, a first-level navigation item can contain a hierarchical submenu.This means you can create a main menu item and its direct dropdown submenu.

Q2: How can I highlight the navigation menu item corresponding to the current page?

In the template,navListThe label returns each navigation item object (itemandinner) contains aIsCurrentfield. This field is returned when the current page matches the navigation item linktrue. You can use conditional judgments in the template, such asclass="{% if item.IsCurrent %}active{% endif %}"Add a specific CSS class to the currently active navigation item to achieve a highlight display effect.

Q3: Can I set different navigation menus for different areas of the website (such as the top, sidebar, footer)?

Absolutely. The navigation settings on AnQiCMS backend provide the navigation category management feature, allowing you to create multiple independent navigation categories.For example, you can create categories such as 'main navigation', 'footer navigation', and so on, and then add and manage navigation links separately for each category.In the template, just by passing throughnavListlabel'stypeIdThe parameter specifies the corresponding navigation category ID, which can call and render different navigation menus.