In website operation, a clear and intuitive navigation menu is the core of user experience, as well as the key to content organization and promotion.AnQiCMS (AnQiCMS) understands this and provides you with a flexible and powerful navigation menu customization feature, and supports multi-level dropdown display on the front end, making your website structure clearer and content access more convenient.

Next, we will together learn how to easily set up and apply these navigation in AnQiCMS.

Step 1: Create and manage navigation menus in the background.

To build a hierarchical navigation menu, we first need to enter the AnQiCMS backend for configuration.

  1. Enter the navigation settings interfaceLog in to your AnQiCMS backend, then find and click "Backend Settings" in the left menu, and select "Navigation Settings".This is the center for managing all navigation links of the website.

  2. Manage navigation categories: AnQiCMS allows you to create navigation in different locations, such as top main navigation, footer navigation, or sidebar navigation.The system will have a "default navigation" category by default.If you need to set independent navigation for different areas of the website, you can add new categories in the 'Navigation Category Management', such as 'Footer Navigation'.This helps you organize and manage menu items for different purposes more clearly.

  3. Add navigation links:

    • Set basic informationClick on 'Add Navigation Link' and you will see a series of fillable options.The first is "Display Name", which is the text displayed to the user on the front end, and you can name it flexibly as needed.If your design requires, you can also fill in the "subheading name" or "navigation description", which can be called in the front-end template to provide additional information.
    • Select link type: AnQiCMS provides three flexible link types:
      • Built-in linkContains the home page link of the website as well as the home pages of articles, products, and other content models, making it convenient for you to quickly refer to the entry points of the core pages of the website.
      • Category page linkYou can directly select the created article category, product category, or single page as a navigation link. This is very suitable for directly integrating your content categories into the main navigation.
      • External linkIf you need to link to a custom URL within the site or a page on an external website, you can select this type and manually enter the full URL address.
    • Build multi-level menu (dropdown menu): The key to implementing multi-level dropdown menus is to set the 'parent navigation'.When adding a new navigation link, if this link is a submenu item of a first-level navigation, you just need to select the corresponding first-level menu in the 'Parent Navigation' dropdown box.Currently, AnQiCMS supports a navigation list with a maximum of two levels, that is, a main menu item can have a sub-menu level.
    • Adjust display orderBy setting the 'Display Order' number, you can easily adjust the arrangement position of menu items. The smaller the number, the closer the menu item will be displayed on the front end.

By following these steps, you can build a clear, ordered navigation menu structure with dropdown layers in the background.

Step two: Implement multi-level dropdown display in the front-end template.

After the background menu configuration is completed, the next step is to present these structured navigation data in the website's frontend template and give them a beautiful dropdown effect.

  1. Confirm the location of the template fileGenerally, the top navigation code of the website is placed in the template directory (such as/template/您的模板目录/) under the common part file, for examplebash.htmlorheader.html. You need to edit these files to insert navigation code.

  2. UsenavListLabel to get navigation data: AnQiCMS provides a special function to get navigation list data.navListLabel. You just need to call it in the template, and you can get all the navigation menu data configured on the back-end:

    {% navList navs with typeId=1 %}
    {# 这里的 navs 变量将包含您后台配置的导航数据。typeId=1 默认指主导航类别 #}
    {# 如果您创建了其他导航类别，比如ID为2的“页脚导航”，则改为 typeId=2 #}
    <ul class="main-menu"> {# 这是一个示例性的HTML结构，您需要根据您的设计自定义 #}
    {% for item in navs %}
        <li class="menu-item {% if item.NavList %}has-dropdown{% endif %} {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {# 检查当前菜单项是否有子菜单，如果有，则渲染子菜单 #}
            {% if item.NavList %}
                <ul class="submenu"> {# 子菜单的HTML结构 #}
                {% for sub_item in item.NavList %}
                    <li class="submenu-item {% if sub_item.IsCurrent %}active{% endif %}">
                        <a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
                    </li>
                {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endnavList %}

  3. Understanding the key logic of the template code:

    • {% navList navs %}This line of code will fetch the navigation data you have configured from the background and store it.navsthis variable.
    • {% for item in navs %}This is a loop used to iterate through all the first-level navigation menu items.
    • {{ item.Link }}and{{ item.Title }}Output the link address and display name of the current menu item.
    • {% if item.NavList %}This is the key judgment for implementing the dropdown menu.item.NavListIt will include all sub-menus of the current menu item. If the list is not empty, it means there is a second-level menu, and we will render a dropdown container.
    • {% for sub_item in item.NavList %}This inner loop is used to iterate and display all the links and names of the secondary menu items.
    • {% if item.IsCurrent %}active{% endif %}This is a very useful judgment, it will check whether the current menu item corresponds to the page the user is visiting. If it does, you can add it oneactiveClass name, highlighted by CSS to enhance user experience.

  4. Implement dropdown effect by combining CSS and JavaScript.: The AnQiCMS template tags are responsible for providing the data structure and content for navigation, but the actual dropdown animation, hover effects, and overall aesthetics depend on the CSS styles and possibly the JavaScript scripts you write. For example, you can write CSS rules to control.submenuHover over.has-dropdownto display and add some transition animations.

Practical skills and precautions

  • Call for multi-site navigationIf you have deployed multiple sites of AnQiCMS and want to call the navigation menu of another site in the template of a site, you cannavListthe tag withsiteIdparameters, for example{% navList navs with typeId=1 siteId=2 %}.siteId=2Indicates the navigation of the site with ID 2.
  • SEO optimizationWhen setting navigation links, try to choose a display name that accurately describes the page content, and cooperate with the powerful pseudo-static rules of AnQiCMS to generate SEO-friendly URL structures.
  • Update cache in time: After any modification to the navigation menu in the background, remember to click the "Update Cache" button at the top of the background, to ensure that the front-end page displays the latest changes immediately. *