How to display the website navigation menu and support multi-level drop-down navigation?

As an experienced CMS website operation personnel for an information security company, I am well aware that a well-organized and user-friendly navigation menu is crucial for the user experience and content discovery of the website.The AutoCMS provides powerful and flexible navigation management functions, which can not only help us easily set up the main menu of the website, but also support multi-level dropdown navigation to meet the needs of complex website structures.

Background navigation configuration: Build menu structure

In AnQi CMS, the setting of the navigation menu starts first from the background management interface. We need to accessBackground home pageThen enterBackend settingsAnd selectWebsite navigation settingsHere is the core area where we manage all the navigation links of our websites.

Firstly, the Safe CMS allows us to create multiple navigation categories based on different layout requirements.For example, we can set independent categories for the main navigation, footer navigation, or sidebar navigation.typeIdUsed for subsequent template calls. In this way, we can define completely independent menu structures for different areas of the website, greatly increasing the flexibility of website layout.

After selecting or creating a navigation category, we can add specific navigation links.Each link can be set to display a 'Display Name', which is the menu text shown on the frontend page; 'Subtitle Name' and 'Navigation Description' can be filled in as needed to accommodate more complex design requirements.

• Built-in linkFor example, the home page link, article model home page, product model home page, etc., these are the commonly used links preset by the system.
• Category page linkWe can choose 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's 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 a existing top-level navigation item is selected as its 'parent navigation', then this new link will become a sub-menu item under the top-level navigation.English CMS native backend navigation settings support up to two-level navigation links, that is, a sub-menu under a main menu item.This means we can easily construct the structure of "Main Menu -> Dropdown Submenu", which is enough 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, making it convenient for us to perform fine-grained control.

Front-end template call: displays dynamic navigation

Configure the backend navigation first, and then you need to call and display these menus in the frontend template files. The template engine of Anqi CMS is similar to Django syntax, and the template files are usually located in the root directory of the website./templateThe directory. We can write HTML structure here and dynamically retrieve the navigation data configured in the background through the tags provided by the CMS.

The core template tags arenavList。It is used to get all link data for the 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 will return an array object containing navigation items (as shown in the above example isnavs)。Each navigation item (such asitema variable) may contain the following keywords:

• Title: The display name of the navigation item.
• LinkNavigation item link address.
• IsCurrent：一个布尔值，指示当前导航项是否是当前页面。
• NavList：这是实现多级导航的关键，如果当前导航项有子菜单，NavListIt will be an array containing submenu items.

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

The following 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 navigation to achieve beautiful dropdown effects and responsive layouts.You need to write the corresponding CSS styles and JavaScript interaction code.