How to customize the top navigation menu of a website and control its display?

The top navigation menu of the website is the first barrier for users to interact with content, and it directly affects users' understanding of the website structure and content.A well-designed, easy-to-use navigation menu can significantly enhance user experience and the professionalism of the website.AnQiCMS (AnQiCMS) offers flexible and powerful features, helping us easily customize and control the top navigation menu of the website to meet different design and operation needs.

Understanding navigation categories and structure

In Anqi CMS, the management of the navigation menu revolves around the core concept of 'navigation category'.The system provides a default "Default NavigationThis category management allows you to configure independent menus for different areas of the website, maintaining the website's layout and the uniqueness of its functions.

To create a new navigation category, just go to the "Background Settings" area of the Anqin CMS backend and find the "Website Navigation Settings" menu.Here, you can manage existing navigation categories and add new ones.Once the category is created, you can start adding specific navigation links to it.

Configure navigation links: content and display

To add links to navigation categories is a key step in customizing the menu.Each navigation link carries the responsibility of guiding users to a specific page and allows you to finely control its display style.

Core configuration items include:

• Parent navigation:This is the basis for implementing multi-level dropdown menus.The Anqi CMS supports two-level navigation links, which means you can set a link as a main menu item and specify a submenu item for it.Select 'Top Navigation' indicates that the current link is a main menu item, and associating it with an existing menu item will make it a submenu.
• Display name:This is the text displayed on the front page navigation link. You can name it freely, without having to match the title of the page linked, to optimize the user's visual experience and click temptation.
• Subtitle name and navigation description:If your design requires, you can add additional subtitles or descriptions to navigation links to provide a richer content preview, which is very useful in certain showcase-style website designs.
• Display order:By setting the number, you can control the order of the menu items. The smaller the number, the earlier the menu item is displayed. This allows you to easily adjust the position of the menu items without having to recreate them.

Link Type:

AnQi CMS offers three flexible link types, ensuring you can point to any location within or outside the website:

1. Built-in links:Including the homepage of the website, homepages of different content models (such as article model homepage, product model homepage), and other commonly used links.Select these built-in options to ensure the stability and accuracy of the link.
2. Category page links:Allow you to directly link the navigation to the existing category page or independent page on the website.When you want to highlight a product category or an independent page like 'About Us' in navigation, this option is very useful.
3. External links:Provided with the greatest flexibility, you can enter any valid URL address, whether it is a custom link to another page within the site or a link to an external website, it can be easily integrated into your navigation menu.

Control the display of the navigation menu in the template

After configuring the navigation links, we need to call and display these menus in the website's front-end template. Anqi CMS is usednavListTag to implement this feature.

Assuming you have created a category for top navigation with the category ID of1. You can use the following code in the template file to display a two-level menu:

{% navList navs with typeId=1 %} {# 假设1是您的顶部导航类别ID #}
    <nav class="main-navigation">
        <ul>
            {% for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}"> {# 使用IsCurrent判断是否为当前页面，添加active样式 #}
                    <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>
    </nav>
{% endnavList %}

In this template code:

• {% navList navs with typeId=1 %}Specified the navigation category to be called (here is the category with ID 1).
• {% for item in navs %}Loop through the main menu items.
• {{ item.Link }}and{{ item.Title }}Output the link address and display name of the menu items separately.
• {% if item.IsCurrent %}Used to determine if the current menu item matches the page the user is visiting, usually used to highlight the navigation item currently in place.
• {% if item.NavList %}Check if there is a submenu under the current main menu item. If there is, go through again.{% for subItem in item.NavList %}Loop to render the second-level submenu.

Through this mechanism, Anqi CMS perfectly combines the flexibility of backend configuration with the display control of front-end templates, allowing you to freely customize the style and function of the navigation menu according to the design style and interaction requirements of the website.

Frequently Asked Questions (FAQ)

Q1: Why did I set the navigation link but it did not display on the website front end?A1: Firstly, please confirm that you have added the navigation link to the correct 'Navigation Category' in the background 'Website Navigation Settings', and that the category ID is passed through the templatetypeIdThe parameter was called correctly.Next, check whether the navigation links you added include all the necessary fields (such as display name, link address), and whether the display order is reasonable.base.htmlor a specific navigation block file was used correctlynavListthe tag to render the navigation category

Q2: Can AnQi CMS support creating a three-level navigation menu?A2: The Anqi CMS backend management interface supports default two-level structure for navigation links (i.e., main menu items and their sub-menu items). If you need to implement deeper three-level or multi-level navigation, you need to manually adjust the template code by judgment.subItem.NavList(That is, the existence of the submenu item of the second-level menu) whether to render extra, but this usually requires more complex CSS and JavaScript support, and may affect the user experience, it is recommended to consider carefully.

Q3: How to make a navigation link open in a new window instead of the current page when clicked?A3: The Anqi CMS backend currently does not have an option to set navigation links to open in a new window. You need to manually modify it in the template file.<a>Add tagtarget="_blank"Implement a property. For example, change<a>the tag to<a href="{{ item.Link }}" target="_blank">{{ item.Title }}</a>, so that clicking the link will open in a new window.