The website navigation is an important guide for users to access the website. A clear and easy-to-use navigation menu can greatly enhance the user experience.AnQiCMS in the website navigation settings and display provides very flexible and powerful functions, allowing us to easily manage and implement multi-level menu structures to meet the needs of various website layouts.
In AnQiCMS backend, all settings related to website navigation are concentrated in the 'Navigation Settings' module.Enter this page, you will first see a 'Navigation Category Management' area.This feature is very practical, it allows you to create independent navigation menus for different areas of the website, such as the main navigation at the top, the footer navigation at the bottom, or quick links in the sidebar, and to create different navigation categories separately.Each category can have its own exclusive set of navigation links, independent of each other, convenient for management.
When you start creating or editing navigation links, AnQiCMS provides various configuration options.Firstly is the 'Display Name', which is the text presented by the navigation link on the front-end page.If you need more information display, you can also set "Subtitle Name" and "Navigation Description", and this additional text content can be flexibly called in your front-end template.
AnQiCMS's navigation links support three main types, which greatly enhances its application flexibility: Firstly isBuilt-in link，includes the "home link" of the website and various "home pages" of content models that you create in content management, such as article list pages, product display pages, etc., all of which are preset by the system and can be selected for use directly. The second one isCategory page linkYou can specify the established "article category", "product category", or "single page" as navigation links.This means that independent pages like "About Us" or specific article categories can be easily integrated into the navigation menu.External LinkIf you need to navigate to a specific URL within the site or link to other external websites, such as social media homepages, you can choose this type and then manually enter the target link address.
In addition, each navigation link is equipped with a "Display Order" feature, which allows you to control the arrangement of navigation items in the menu by entering numbers. The smaller the number, the closer the navigation item will be displayed at the front.
AnQiCMS native supportUp to two-level navigation structure.This means you can easily build a website layout with a primary menu and its secondary dropdown menu.When setting navigation links in the background, by flexibly selecting 'Parent Navigation', you can clearly specify whether the current link exists as a top-level menu item or belongs to a second-level submenu under a first-level menu.
To present this multi-level navigation structure on the website front-end, we need to use the AnQiCMS providednavListTemplate tag. This tag is very powerful, it can retrieve all navigation data configured in the background. When using{% navList navs %}...{% endnavList %}After obtaining data in such a structure, we will usually go throughforLoop through each item in the navigation. For navigation items with sub-menus,navListthe data returned by the tag will contain a name calledNavListThe property, which itself is a sub-navigation list. By determining whether it exists, we can know whether the current navigation item has a submenu, and we can nest another one.item.NavListexists, we can know whether the current navigation item has a submenu, and we can nest another one.forLoop to display these secondary navigation items.
For example, the document provides very practical code examples that show how to display not only the names and links of the secondary categories in the dropdown menu of navigation, but also how to further display the product document list contained within the secondary category, or even deeper-level subcategories in English.This deep integration capability greatly expands the practicality of navigation, making it no longer just a simple collection of links, but also serves as a quick preview and entry point for website content.For example, when the user hovers over a specific product category under the "Products" main menu, the dropdown menu can directly display the thumbnail or brief information of popular products under that category, effectively enhancing the user's efficiency in obtaining information.
In summary, AnQiCMS provides a solution that is both intuitive and feature-rich for the setting and display of website navigation menus.Flexibility in backend management, supporting various link types such as built-in, categorized, and external links, and a two-level navigation structure easily achieved through template tags, fully demonstrates its professionalism and ease of use in content operation.No matter your website needs a simple and clear single-level navigation or a rich and hierarchical two-level dropdown menu, AnQiCMS can help you achieve it efficiently and conveniently in English.
Frequently Asked Questions (FAQ):
Q1: Does the AnQiCMS navigation menu support nested structures of three levels or more? A1:
Q2: Can I add a link to an external website in the AnQiCMS navigation menu, such as my WeChat official account QR code page?
A2:Of course, you can.In the "Navigation Settingshttps://mp.weixin.qq.com/s/your_qrcode_link），such that your navigation menu can link smoothly to external websites.
Q3: How should I implement if I want the navigation menus on different pages of my website to have distinct styles?
A3:Navigation menu visual styles are mainly controlled by the CSS stylesheet on the front end. To achieve differentiation in navigation styles for different pages, you can, in the template file, set styles based on the current page type (such as the homepage, article detail page, category list page, etc.) or its URL path.<body>or navigate container element to add a unique CSS class name. For example, add for the home pageclass="is-homepage"and then you can target it in your CSS file..is-homepage .main-navDefine a specific set of style rules, while other pages can follow the default.main-navStyles, or customize their class names as needed. This usually requires some knowledge of front-end templates and CSS.