How to set up the website navigation menu in AnQiCMS and support multi-level dropdown display?

The website navigation is the first window for users to interact with the website, a clear and intuitive navigation design can greatly enhance the user experience and effectively guide them to find the information they need.In AnQiCMS, setting up the website navigation menu and supporting multi-level dropdown display is a flexible and practical feature.Next, we will explore how to achieve this goal in AnQiCMS.

Build the backend logic structure of the website navigation

You need to go to the "Navigation Settings" area in the AnQiCMS backend to create and manage navigation menus.Here you can not only define the main navigation, but also set independent navigation menus for different areas of the website (such as the footer, sidebar), to meet the diverse layout requirements.

First, please log in to the AnQiCMS admin interface.In the left menu bar, click "Background Settings", then select "Navigation Settings".After entering this interface, you will see a navigation list, here is the "home" of all navigation menus.

Flexible management of navigation categories

AnQiCMS allows you to create multiple navigation categories.This is like setting up different containers for different purposes.For example, you can have a category named "Primary Navigation" for the global menu at the top of the website; another category named "Footer Navigation" for the information links at the bottom; or even create a "Sidebar Navigation" for auxiliary menus on specific pages.If the default "default navigation" category is not enough, you can easily add new categories through the "Custom Navigation Category" feature.This greatly enhances the flexibility of the website layout.

Set navigation links one by one

The next is to set specific navigation links. Each navigation link has its own properties, which together determine how it is displayed on the front page and where it links to.

• Parent navigation:This is the key to implementing a multi-level dropdown menu.You can choose to set a link as a 'Top-level Navigation', making it a main menu item; or you can set it as a 'Sub-navigation' of an existing navigation, so that it will drop down when the parent menu is hovered over or clicked.Two-levelThe navigation link, that is to say, you can set a layer of dropdown menu under the top-level menu.
• Display name:This is the navigation text that visitors see on the website, you can name it freely according to the content, and it does not have to be consistent with the link content.
• Subtitle name and navigation description:If your design requires, you can add additional subtitles or description text to navigation to provide richer contextual information.
• Link Type:AnQiCMS provides three flexible link types:
  • Built-in links:Suitable for linking to fixed function pages on the website, such as the homepage, article model homepage, product model homepage, or other custom model homepages.Select these options and the system will automatically generate the corresponding link.
  • Category page links:Easily link to any category page or single page created on your website (such as "About Us
  • External links:The highest degree of freedom is provided, you can enter any internal or external URL address. This is very useful for linking to external partner websites or specific promotional pages.
• Display order:By setting the numeric size, you can control the arrangement order of navigation links, the smaller the number, the closer to the front it displays.

By following these steps, you have completed the complete logical skeleton for the website navigation. The data configured in the background needs to be displayed on the website front end through template tags next.

Implement multi-level dropdown navigation display in the template

In AnQiCMS, the display logic of the website is controlled by template files. To display the multi-level navigation menu set up in the background on the website, you need to use the template.navListThe tag retrieves the navigation data you configure in the background and allows you to render it through a loop.

The code for the navigation menu is usually placed in the public header template file of the website (such aspartial/header.htmlorbash.html).

The following is a simplified template code example for implementing a two-level dropdown navigation menu:

{# 使用 navList 标签获取后台配置的导航数据 #}
{% navList navs with typeId=1 %} {# typeId=1 默认获取主导航类别，您可以根据实际情况修改 #}
<ul>
    {# 遍历顶级导航项 #}
    {%- for item in navs %}
        {# 根据 IsCurrent 属性判断当前导航项是否是当前页面，以添加活跃（active）样式 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            
            {# 检查当前导航项是否有子导航（即是否有下拉菜单） #}
            {%- if item.NavList %}
            <ul class="submenu"> {# 子导航菜单的容器，您可以自定义class名 #}
                {# 遍历子导航项 #}
                {%- for inner in item.NavList %}
                    <li class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In this code block:

• {% navList navs with typeId=1 %}Will be fetched from the backgroundtypeIdFor navigation data of 1 (usually the main navigation), and assign it tonavsVariable.
• The outermost{% for item in navs %}Looped to display the top-level navigation menu items.
• item.IsCurrentUsed to determine whether the current page corresponds to this navigation item, so that the front-end can highlight it through CSS styles.
• {% if item.NavList %}It is crucial, it checks whether there are child navigation items under the current top-level navigation item. If there are, it renders one.<ul>The label serves as the container for the dropdown menu.
• Inner layers.{% for inner in item.NavList %}The loop is used to display the sub-navigation items in the dropdown menu.

Please note that the above code only provides the basic HTML structure.To achieve an aesthetically pleasing dropdown effect, you also need to write the corresponding CSS styles and JavaScript code (for example, controlling the display of the dropdown menu on mouse hover).

Summarize the key points.

Mastering these points of navigation settings can help us manage and optimize the website structure more efficiently:

• Two-level depth limit:The AnQiCMS navigation menu currently supports one-level main menus and one-level drop-down submenus, with a total of two levels of depth. Please note this when planning the navigation structure.
• Display order:By precisely setting the display order of each navigation link, ensure that the menu items are arranged according to your wishes.
• Flexible link types:Fully utilize the built-in link, category page link, and external link types to meet various page jump needs.
• Active status indicator: item.IsCurrentThe attribute is the key to highlighting the navigation on the current page, it can significantly improve the user experience.

AnQiCMS provides intuitive and powerful features for setting and displaying navigation menus, whether you are operating a small and medium-sized enterprise website or managing a personal blog, you can easily build a user-friendly and feature-complete website navigation system.

Frequently Asked Questions (FAQ)

1. Does AnQiCMS navigation menu support dropdown displays with more than two levels?I apologize, AnQiCMS currently supports up to two levels of navigation menus by default: a top-level menu and its first-level dropdown submenu.If you need a deeper level of navigation structure, you may need to consider simulating it through custom development or adjusting the content organization method.

2. How to make the navigation menu display as 'active' when accessing the current page?When rendering navigation in the template, each navigation item object (itemandinner) has aIsCurrentProperty. This property is a boolean value (true/false), when the navigation item link matches the current page URL.IsCurrentWithtrue. You can use HTML tags like (for example<li>or<a>) based onIsCurrentadd aactiveclass, and then define the highlight style for thisactiveclass.

3. Can I set different navigation menus for different areas of the website (such as headers and footers)?Of course you can.AnQiCMS supports the 'Navigation Category Management' feature.You can create multiple navigation categories (such as "main navigationnavListUsed in tagstypeIdSpecify the navigation category you want to render with the parameter.