How to display a website navigation menu and support multi-level dropdown navigation?

As a senior security CMS website operations person, I know that a well-organized, easy-to-use navigation menu is crucial for the website's user experience and content discovery.The AnQi CMS provides powerful and flexible navigation management functions, which can help us easily set up the main menu of the website and also support multi-level dropdown navigation to meet the needs of complex website structures.

Back-end navigation configuration: Build menu structure

In Anqi CMS, the setup of the navigation menu starts from the backend management interface. We need to accessBackend homepageThen enterBackend settings, and selectWebsite navigation settings. Here is the core area where we manage all the website navigation links.

First, AnQi CMS allows us to create multiple navigation categories based on different layout requirements.For example, we can set independent categories for main navigation, footer navigation, or sidebar navigation.This is completed by adding a new category in the "Navigation Category Management", each category has its uniquetypeIdUsed for subsequent template calls. In this way, we can define independent menu structures for different areas of the website, greatly increasing the flexibility of the website layout.

After selecting or creating a navigation category, we can add specific navigation links.Each link can be set to display a name, which is the menu text displayed on the front-end page;“Subtitle Name” and “Navigation Description” can be filled as needed to accommodate more complex design requirements.The core lies in the selection of 'link type', Anqi CMS supports three types of links:

• Built-in linkFor example, home page links, article model home page, product model home page, etc., these are the commonly used links preset by the system.
• Category page link: We can select existing article categories, product categories, or single pages as navigation links, and the system will automatically generate the corresponding link addresses.
• External linkThis provides great flexibility, allowing us to manually input any custom URL, whether it is an internal link or an external website link.

To implement multi-level dropdown navigation, the key is to use the 'parent navigation' field.When adding or editing a navigation link, if you select an existing top-level navigation item as its 'parent navigation', then the new link will become a submenu item under that top-level navigation.The AnQi CMS native backend navigation settings support up to two levels of navigation links, that is, a main menu item with a sub-menu at the next level.This means we can easily construct the structure of 'Main Menu -> Dropdown Submenu', which is sufficient to meet the hierarchical display needs of the vast majority of websites.By the "Display Order" field, we can flexibly adjust the arrangement order of navigation items, with smaller numbers appearing earlier for fine-grained control.

Front-end template call: display dynamic navigation

After configuring the background navigation, you need to call and display these menus in the front-end template file next. The Anqi CMS template engine is similar to Django syntax, and the template files are usually located under the root directory of the website./templateIn the catalog. We can write the HTML structure here and dynamically obtain the navigation data configured in the background through the tags provided by Anqi CMS.

The core template tags arenavListIt is used to get all the link data for a specified navigation category. For example, to get the menu data for the default navigation category, we can call it like this:

{% navList navs %}
    {# 导航HTML结构将在这里生成 #}
{% endnavList %}

navListThe tag returns an array object containing navigation items (as shown in the example isnavs)。Each navigation item (such asitemvariable) may contain the following key fields:

• Title: The display name of the navigation item.
• Link: The link address of the navigation item.
• IsCurrent: A boolean value indicating whether the current navigation item is the current page.
• NavList: This is the key to implementing multi-level navigation, if the current navigation item has a submenu,NavListIt will be an array containing submenu items.

To construct a multi-level dropdown navigation HTML structure, we can use nestedforLoop to traverse the main menu items and their sub-menu items. When a main menu item'sitem.NavListfield exists, it means it has a sub-menu, and we can render the second-level menu.

Here is a basic code example showing how to build a two-level dropdown navigation menu in a template:

<ul class="main-nav"> {# 主菜单容器，这里通常是header.html的一部分 #}
    {% navList navs %}
        {%- for item in navs %} {# 遍历一级导航项 #}
            <li class="nav-item {% 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>

Please note that the above code mainly provides the HTML structure for the navigation dropdown effect and responsive layout.You still need to write the corresponding CSS styles and JavaScript interaction code.This usually involves