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 support for secondary dropdown menus.Next, we will together learn how to achieve this goal in AnQiCMS.

Step 1: Configure navigation links in the background

Firstly, you need to log in to the backend management interface of AnQiCMS, and enter the navigation settings module.

  1. Manage navigation categoriesAnQiCMS Allows you to create independent navigation menus for different areas of the website.System defaults to have a "Default Navigation" category, usually used for the main menu of the website.If you wish to set different navigation at other locations on the website (such as the footer or sidebar), you can click "Customize Navigation CategoriesSo, you can configure a dedicated menu for each area, keeping the website content neat and organized.

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

    • Parent Navigation:When adding the first-level navigation, please select 'Top-level navigation', which means it has no parent menu and is independent.
    • Display Name:Fill in the navigation name that users will see on the website, such as "Products & Services
    • Link type:AnQiCMS Provides a variety of link types for you to choose from:
      • Built-in Links:Including the homepage, article model homepage, product model homepage, etc., making it convenient and quick to point to built-in system pages.
      • Category page link:You can choose a created article category, product category, or single page as a navigation link, such as pointing to the 'Company Introduction' single page or the 'Industry News' category.
      • External links:Easily add any on-site or off-site link 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 specify the new navigation item under its corresponding primary navigation.

    • Parent Navigation:When adding a second-level navigation, do not select 'Top-level navigation', but choose the corresponding first-level navigation item you have already created from the drop-down list.For example, if your "Products and Services
    • Display name, link type, display order:These settings are similar to creating a first-level navigation item, please 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.

第二步：在网站模板中展示导航

后台配置完成后，您需要在网站的前端模板文件中调用这些导航数据，使其在网站上实际显示出来。AnQiCMS 的模板系统使用 EnglishnavListLabel to complete this task.

Usually, the calling code of the navigation menu is placed in the common header file of the website template (for examplepartial/header.htmlorbase.html）in it.

Below is an example of navigation code that supports secondary dropdown menus 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 used by AnQiCMS to call the navigation list.navsThis is 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, pleasetypeIdChange to the corresponding ID.
  • {%- for item in navs %}: This loop will iterate through all the first-level navigation items configured in your background.itemThe variable represents each first-level navigation item.
  • {{ item.Link }}and{{ item.Title }}：This outputs 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.activeClass, convenient for highlighting the current page's navigation through CSS.
  • {%- if item.NavList %}: This is the key to creating a secondary dropdown menu.item.NavListIt will include all sub-navigation items of the current level navigation (i.e., the secondary navigation you configure in the background). Ifitem.NavListit exists, it means that the first-level navigation has a dropdown menu.
  • <ul class="sub-nav">and{%- for inner in item.NavList %}：In here, you can create a new<ul>tag to wrap a secondary menu item, andinneruse variables to iterateitem.NavListthrough each secondary navigation item.
  • CSS and JavaScript：Please note that the above code is mainly responsible for outputting the HTML structure of navigation.To achieve the true "dropdown menu" effect, you also need to write the corresponding CSS styles to control the hiding and displaying 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 simple:Avoid too deep menu levels, AnQiCMS defaults to support two levels which is enough to meet the needs of most websites. Too many levels will make users lose their way.
  • Clear naming:Navigation names should be intuitive and clear, allowing users to understand the content at a glance.
  • Test compatibility:Test your navigation menu on different devices (PC, mobile, tablet) and different browsers to ensure its display and functionality.
  • Accessibility:Consider adding ARIA attributes to the navigation menu to enhance friendliness for screen reader and other assistive technology users.

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

Common Questions (FAQ)

1. AnQiCMS Does it support creating a dropdown menu with three or more levels?

Currently, the navigation list feature of AnQiCMS 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 more complex functionality through custom template tags or by combining it with front-end JavaScript, but this goes beyond the scope of the system's built-in navigation settings.

2. How do I call multiple navigation categories (such as main navigation, footer navigation) separately in the template?

In the background navigation category management, each navigation category will have a unique ID. Used in the template.navListwhen tagging, you can go throughtypeIdParameter 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.{% navList mainNavs with typeId=1 %}and{% navList footerNavs with typeId=2 %}.

3. My secondary dropdown menu displays normally on the PC side, but it cannot be expanded on the mobile side. What is the reason?

This is usually caused by the different interaction logic and style handling of dropdown menus between mobile and PC endpoints.PC end usually uses mouse hover to trigger dropdown, while on mobile, usually a click is needed to expand.You need to check the CSS and JavaScript code responsible for the dropdown menu's display/hide, ensuring that it can correctly respond to mobile click events or touch gestures.