How to display a second-level dropdown menu in the navigation menu and associate different content?

AnQi CMS provides a直观而强大的导航菜单管理系统，allowing you to easily build clear, user-friendly navigation structures for your website, including multi-level dropdown menus.This not only improves the user experience of the website, but also helps search engines better understand the hierarchy of your website content, thereby optimizing SEO performance.

Understanding the navigation system of AnQi CMS

In Anqi CMS, the settings and management of the navigation menu are all concentrated in the "Website Navigation Settings" feature of the background.This is the core area where you build the website menu. The Anqi CMS navigation system allows you to create different types of navigation categories, such as main navigation, footer navigation, or sidebar navigation, and each navigation category supports up to two-level menu structures, that is, a level one main menu and its corresponding level one dropdown submenu.

This design makes content organization more flexible, you can aggregate related content under the same parent menu, display it to visitors in the form of a drop-down menu, which maintains the interface tidy and makes it convenient for users to quickly find the information they need.

Backstage settings: the foundation for building secondary menus

To start setting up the secondary dropdown menu, you first need to enter the "Background Settings" area of the Anqi CMS backend, and then select "Website Navigation Settings".

1. Manage navigation categories:By default, the system will have a 'default navigation' category.If you need to set up independent menus for different areas of the website (such as the main navigation, footer, etc.), you can add new categories through the "Navigation Category Management" feature.For example, you can add a new category named 'Footer Navigation'.Each category will have an independent navigation link set.

2. Configure navigation links:Under the selected navigation category, you can start adding and organizing navigation links.

   • Create a first-level navigation:First, add the main menu item of your website. When adding a new link, set the 'Parent Navigation' option to 'Top Level Navigation'.These will be the main entries displayed on the navigation bar of your website.
   • Create a secondary dropdown menu:Next, add a submenu to each top-level navigation item that requires a dropdown function.When adding these submenu items, the key is to set the 'Parent Navigation' option to the corresponding top-level navigation item.These links will automatically be assigned to their parent menu and form a dropdown effect.When configuring each navigation link, you will find that the 'Link Type' provides multiple options, which is the key to associating different content:
     • Built-in links:Home page suitable for linking to the website's homepage or a specific content model (such as articles, products).
     • Category page links:This is the most commonly used content association method. You can directly select the 'document category' or 'single page' you have created as the navigation target.When you select a category, the navigation link will automatically direct to the page of that category;Select a single page to link to that page. This way, your dropdown menu can directly guide users to access specific content lists or information pages.
     • External links:Allow you to link to any custom URL within the site or external websites, providing great flexibility.
   • Adjust display order:You can use the "Display Order" field to control the arrangement of navigation items in the menu. The smaller the number, the earlier it is displayed, which helps you finely adjust the menu layout.

Through the above background configuration, you have already defined a clear hierarchy and content direction for the website's navigation menu.

Template implementation: Let the navigation 'move' on the front page.

After setting up the navigation links on the backend, you still need to call these data in the frontend template files so that they can actually display on the website.AnQi CMS uses a template engine syntax similar to Django, making template development simple.

1. Locate the template file:usually, the header navigation menu of a website is defined in a public template file, such as/template/您的模板名称/partial/header.htmlor/template/您的模板名称/bash.htmlin such files.

2. UsenavListTags:AnQi CMS providesnavListTemplate tag to retrieve the navigation list data configured in the background. This tag will return a structured data containing navigation items and their sub-items.

   Here is a general example code snippet that shows how to usenavListtags to render a menu structure with secondary dropdowns:

   <nav class="main-navigation">
       {% navList navs with typeId=1 %} {# 假设 typeId=1 是您的主导航类别 #}
       <ul>
           {%- for item in navs %} {# 遍历一级导航项 #}
               <li class="{% if item.IsCurrent %}active{% endif %}">
                   <a href="{{ item.Link }}">{{item.Title}}</a>
                   {%- if item.NavList %} {# 判断当前一级导航是否有子菜单 #}
                       <ul class="sub-menu"> {# 下拉菜单容器 #}
                           {%- for subItem in item.NavList %} {# 遍历二级导航项 #}
                               <li class="{% if subItem.IsCurrent %}active{% endif %}">
                                   <a href="{{ subItem.Link }}">{{subItem.Title}}</a>
                               </li>
                           {% endfor %}
                       </ul>
                   {% endif %}
               </li>
           {% endfor %}
       </ul>
       {% endnavList %}
   </nav>
   

   In this code block,{% navList navs with typeId=1 %}Will get all navigation data under the navigation category with backend ID 1. Outer layerforLoop through the first-level navigation items, the inner layer.{%- if item.NavList %}Is the key to determine whether there is a submenu under the current main menu item. If there is, it will render asub-menulist, and then iterate through theforto display all the second-level submenu items.

   Further expand:In addition to simple sub-menus, you can also display more rich content in the drop-down menu according to your needs. For example, under the second-level menu items, you can usecategoryId=subItem.PageIdCombinearchiveListTags, directly display the list of popular articles or products under the category, greatly enhancing the navigability. When setting navigation links in the background, if you select “Category Page Link”,subItem.PageIdIt will automatically have the corresponding category ID, making it convenient for you to call in the template.

Associate with different types of content: the flexibility of navigation.

The AnQi CMS navigation system demonstrates extremely high flexibility in content association. When configuring navigation links in the background, you can freely choose to associate navigation items with:

• Built-in pages:like the home page or the list page of a specific content model.
• specific categories or single pages:When you associate a dropdown menu item with a category of articles, products, or specific pages such as "About Us", "Contact Us", etc., the system will automatically handle its URL. In the template, you just need to{{item.Link}}or{{subItem.Link}}It can correctly refer to the addresses of these pages. If necessary,item.PageIdorsubItem.PageIdIt can also further help you obtain detailed information about the category or single page in the template, such as displaying the list of articles under the category, etc.
• External website or custom URL:For situations where you need to link to external resources or specific custom URLs within the site, you can also fill it directly.

This flexible content association mechanism allows you to create a clear and informative navigation menu based on the overall content structure of the website and the habits of user access.

Summary

Through the navigation management function of Anqi CMS, you can conveniently and quickly create and maintain multi-level dropdown menus, effectively organizing the website content. From the background navigation category management, link configuration, to the front-end template'snavListTag application, every step aims to provide an efficient and flexible solution to help your website better serve users and achieve better online performance.

Frequently Asked Questions (FAQ)

1. Can the navigation menu only have two levels?Yes, the AnQi CMS built-in navigation management function currently supports the original two-level menu structure, that is, one main menu item and its first-level drop-down submenu.This design is for the simplicity of meeting the needs of most websites and user experience.If you need a deeper level of navigation structure, you may need to implement it through custom templates or by combining with frontend JS/CSS, but this goes beyond the native support of the system.

2. Why did I set up a secondary menu, but the front-end website did not display it?This is usually because the front-end template file did not call or render the data of the second-level menu correctly. Please check the following points:

   • Are the template tags used correctly:Confirm that your template file uses{% navList ... %}the tag and correctly traverse it insideitem.NavListto display the submenu items.
   • CSS style issues:Even if the data is rendered correctly, if there is a lack of corresponding CSS styles to control the display of the dropdown menu (such as default hidden, displayed when the mouse hovers), the user may also not be able to see it.Make sure your CSS file includes styles for handling dropdown menu display/hide, layout, etc.
   • Cache problem:Sometimes system cache or browser cache may cause changes not to be displayed in time, try clearing the Anqie CMS backend cache and browser cache.

3. Can I make the secondary menu directly display the list of articles or products under a certain category?Of course. In the template, when you iterate through the secondary menu itemsubItemthen,