How to create a multi-level navigation with secondary dropdown menus in the AnQiCMS website navigation?

In website operation, a clear and efficient navigation system is the key to user experience and an important part of search engine optimization.AnQiCMS provides flexible navigation settings functionality, allowing website administrators to easily create and manage multi-level navigation menus, including the feature to support secondary dropdown menus.Next, we will together understand how to achieve this goal in AnQiCMS.

Step 1: Configure navigation links in the background

First, you need to log in to the AnQiCMS backend management interface, go to the navigation settings module.

1. Manage navigation categoriesAnQiCMS allows you to create independent navigation menus for different areas of the website.The system has a default 'default navigation' category, usually used for the main menu of a website.If you want to set different navigation in other places on the website (such as the footer or sidebar), you can click "Custom Navigation Category" to add a new category, such as "Footer Navigation" or "Product Navigation".This way, you can configure a dedicated menu for each area, maintaining the cleanliness and order of the website content.

2. Create a first-level navigation itemUnder the navigation category you have selected, start adding a first-level navigation link. These are first-level menu items, which will be displayed directly in the website's navigation bar.

   • Parent navigation:When adding a primary navigation for the first time, please select "Top-level navigation", which indicates that it has no parent menu and is independent.
   • Display name:Enter the navigation names that users will see on the website, such as “Products & Services”, “About Us”, “News Center”, and so on.
   • Link Type:AnQiCMS provides various link types for you to choose from:
     • Built-in links:Including the home page, article model home page, product model home page, etc., for quick and convenient pointing to the built-in pages of the system.
     • Category page links:You can choose the created article category, product category, or single page as the navigation link, for example, pointing to the 'Company Introduction' single page or 'Industry News' category.
     • External links:Flexibly add any on-site or off-site links to meet your personalized needs.
   • Display order:Control the order of navigation items by setting numbers, the smaller the number, the earlier it is displayed.

3. Add a secondary dropdown menu itemTo create a multi-level navigation that supports secondary dropdown menus, the key is to assign the new navigation item to the corresponding primary navigation.

   • Parent navigation:When adding a second-level navigation, do not select 'Top-level navigation', but rather select the corresponding first-level navigation item you have already created from the dropdown list.For example, if your 'Products and Services' is a top-level navigation, then 'Solutions', 'Product Cases', and others can choose 'Products and Services' as their parent navigation.
   • Display name, link type, display order:These settings are similar to creating a first-level navigation item, fill in according to your actual needs. In this way, you can configure multiple second-level dropdown sub-menus for each first-level navigation item.

Step 2: Display navigation in the website template

After the background configuration is completed, you need to call these navigation data in the front-end template files of the website to display them actually on the website. The AnQiCMS template system usesnavListTo complete this task with a label.

Generally, the code for calling the navigation menu is placed in the common header file of the website template (for example,partial/header.htmlorbase.html).

Here is an example of a navigation example with a second-level dropdown menu displayed in the AnQiCMS template:

{% navList navs with typeId=1 %} {# typeId=1 通常指代默认导航，如果创建了其他导航类别，请替换为对应的ID #}
    <ul class="main-nav"> {# 主菜单的UL标签，您可以根据自己的CSS命名 #}
        {%- for item in navs %} {# 遍历所有一级导航项 #}
            <li class="nav-item {% if item.IsCurrent %}active{% endif %}"> {# 为当前活跃的导航项添加active类 #}
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %} {# 检查当前一级导航项是否有子导航（二级菜单） #}
                    <ul class="sub-nav"> {# 二级下拉菜单的UL标签 #}
                        {%- for inner in item.NavList %} {# 遍历二级导航项 #}
                            <li class="sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
                                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

Code analysis:

• {% navList navs with typeId=1 %}This is the tag for calling the navigation list of AnQiCMS.navsIs the variable name you define for navigation data,typeId=1Represents the navigation category with ID 1 (usually the default navigation). If you have created other navigation categories, please specifytypeIdChange to the corresponding ID.
• {%- for item in navs %}This loop will iterate through all the first-level navigation items configured in your backend,itemThe variable represents each first-level navigation item.
• {{ item.Link }}and{{ item.Title }}: Output the link address and display name of the first-level navigation.
• {% if item.IsCurrent %}active{% endif %}: This is a conditional judgment, if the current page matches the navigation item, it will be automatically added.activeThe class makes it easy to highlight the navigation of the current page with CSS.
• {%- if item.NavList %}This is the key to creating a secondary dropdown menu.item.NavListIt will include all the sub-navigation items of the current top-level navigation (i.e., the second-level navigation you configure in the background). Ifitem.NavListit exists, it means that the top-level navigation has a dropdown menu.
• <ul class="sub-nav">and{%- for inner in item.NavList %}Here, you can create a new<ul>tag to wrap the second-level menu item and useinnervariable traversalitem.NavListfor each second-level navigation item.
• CSS and JavaScript:Please note that the above code is mainly responsible for outputting the HTML structure of navigation.To implement the real "dropdown menu" effect, you need to write the corresponding CSS styles to control the hide and show of the secondary menu, and may also combine JavaScript to enhance the interactive experience, such as displaying the dropdown menu when the mouse hovers over it.

Suggestion for optimizing navigation experience

• Keep it concise:Avoid too deep menu levels, AnQiCMS defaults to two levels which is enough to meet the needs of most websites. Too many levels will make users confused.
• Clear naming:Navigation names should be intuitive and clear, allowing users to understand the content they point to at a glance.
• Test compatibility:Test your navigation menu on different devices (PC, mobile, tablet) and different browsers to ensure that it displays and functions correctly.
• Accessibility:Consider adding ARIA attributes to the navigation menu to improve the friendliness for users of screen readers and other assistive technologies.

By following these steps, you can successfully create and display a multi-level navigation with secondary dropdown menus on the AnQiCMS website, providing your website visitors with a more convenient and user-friendly browsing experience.

Frequently Asked Questions (FAQ)

1. Does AnQiCMS support creating dropdown menus with three or more levels?

The navigation list function of AnQiCMS currently supports up to two levels of navigation links by default, that is, a first-level menu item can contain a second-level dropdown menu.If you need a deeper level of menu, you may need to implement it through custom template tags or by combining with front-end JavaScript, but this goes beyond the scope of the system's built-in navigation settings.

2. I have configured multiple navigation categories (such as main navigation, footer navigation), how can I call them separately in the template?

In the background navigation category management, each navigation category will have a unique ID. Used in the template.navListwhen using tags, you can go throughtypeIdParameters are used to specify the navigation category to be called. For example, if your main navigation ID is 1, and the footer navigation ID is 2, then you can use them separately when calling it.{% navList mainNavs with typeId=1 %}and{% navList footerNavs with typeId=2 %}.

3. Why can't my secondary dropdown menu be expanded on mobile devices, while it displays normally on PC?

This is usually due to the different interaction logic and style handling of dropdown menus between mobile and PC endpoints.On the PC side, the mouse hover is commonly used to trigger the dropdown, while on the mobile side, it usually requires a click to expand.You need to check the CSS and JavaScript code responsible for the display/hide of the dropdown menu, ensuring that it can correctly respond to click events or touch gestures on mobile devices. AnQiCMS