Building an efficient and user-friendly website navigation in Anqi CMS is a key factor in improving user experience.Especially for content-rich websites, dropdown menus can help users quickly locate the information they need while keeping the page neat.Strong and powerful provided by AnQi CMSnavListTags, allowing website operators to flexibly implement this effect in templates.
Understanding the navigation management mechanism of Anqi CMS.
Before delving deepernavListBefore the label, we first need to understand how Anqi CMS manages website navigation.In the AnQi CMS backend, the navigation menu configuration is located under the "Navigation Settings" module in the "Backend Settings".This can not only set the default top navigation, but also add custom navigation to other locations according to the specific needs of the website, such as footer navigation or sidebar navigation.Each navigation category can include multi-level navigation links, the current system supports up to two-level dropdown menus, which lays a foundation for achieving the standard two-level dropdown menu effect.
navListBasic application of tags.
navListThe tag is a core tool in the Anqi CMS template used to obtain the page navigation list. Its basic usage is{% navList navs %}...{% endnavList %}. Here,navsIs a custom variable name, you can name it according to your habits, but please make sure to use the same variable name in the subsequent loops.
navListThe tag supports several key parameters to accurately control the navigation data obtained:
typeId: This is the ID of the background navigation category. Anqi CMS allows you to create multiple navigation categories (such as “main navigation”, “footer navigation”, etc.), each of which has a unique ID.Through specificationtypeIdYou can optionally call the navigation menu of a specific category. If not specifiedtypeIdThe system will usually default to the navigation category with ID 1.siteId: This parameter is used in multi-site management scenarios. If you have created multiple sites in the background and want to call the navigation data of other sites, you can specifysiteIdTo implement. For single-site settings, this parameter is usually not required.
navListThrough the tag internal.forLoop through the navigation items. Each navigation item (usually nameditemAll of them include the following important fields, which are crucial for building drop-down menus:
Title: The text title displayed for navigation items.Link: The URL link of the navigation item.IsCurrent: A boolean value indicating whether the current navigation item is the navigation item on the current page, commonly used for addingactiveto highlight the class.NavList: This is a very critical field. If the current navigation item has child navigation,NavListIt will be an array containing these sub-navigation items, with the same structure as the parent navigation item. It is the existence of this field that makes the implementation of multi-level dropdown menus possible.
Build a basic two-level dropdown menu
To implement a basic two-level dropdown menu, we need to nest it in the template usingforLoops and combineitem.NavListTo determine if a submenu exists.
Here is a typical code structure that shows how to usenavListBuild an HTML structure with two-level dropdown menus:
<nav>
<ul>
{% navList navs %}
{%- 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 inner in item.NavList %} {# 遍历子导航 #}
<li class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In this example, the outerforLoop through the top-level navigation items. Inside each top-level navigation item, through{% if item.NavList %}Determine whether the item has a sub-navigation. If it exists, it will render aulelement as a dropdown menu, and use the innerforLoop throughitem.NavListof the child navigation item.IsCurrentfield is used to add to the currently active menu item.activeclass for easy styling highlighting with CSS.
Please note that the above code mainly focuses on the HTML structure. The actual dropdown menu animations (such as displaying on hover and switching on click) and visual styles (such as background color, font, borders) all need to be implemented through custom CSS and JavaScript.
Advanced Application: Nested categories and documents in dropdown menus.
navListThe power goes beyond simply displaying simple links. As a website operator, we often need to display richer content based on navigation items, such as a list of subcategories under a category, even the latest documents under that category.Our AnqiCMS allows us to use other tags likecategoryListandarchiveListnested innavListIn the loop, thus achieving more dynamic and functional dropdown menus.
Consider a scenario, you want to display product categories under the main navigation "Products" menu, and also directly show some products under each category. This can be achieved in the following way:
<nav>
<ul>
{% navList navs with typeId=1 %} {# 假设 typeId=1 是主导航 #}
{%- 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 inner in item.NavList %} {# 遍历二级导航，这里可能是一个产品分类 #}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %} {# 假设 PageId 存储了对应的分类ID #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的产品列表 #}
{% if products %}
<ul class="sub-sub-menu"> {# 这是一个三级菜单，显示产品 #}
{% for product in products %}
<li><a href="{{product.Link}}">{{product.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In the above example, we assume that the second-level navigation item'sPageIdfield stores the corresponding category ID. By{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}We can dynamically retrieve and display 8 product documents under this category, thus presenting more rich content in the dropdown menu.
Another common requirement is to display nested subcategories in the dropdown menu.For example, the main navigation "About Us" includes "Company Introduction" and "Team Style", and the "Company Introduction" may also include "Development History".This can also be donenavListCombinecategoryListImplementation:
<nav>
<ul>
{% navList navs with typeId=1 %}
{%- 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 inner in item.NavList %} {# 遍历二级导航 #}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %} {# 假设 PageId 存储了对应的分类ID #}
{% categoryList categories with parentId=inner.PageId %} {# 获取该分类下的子分类 #}
{% if categories %}
<ul class="sub-sub-menu"> {# 这是三级菜单，显示子分类 #}
{% for subCategory in categories %}
<li>
<a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
Through these flexible nested combinations, Anqi CMS'snavListtags for website navigation design provide great freedom and extensibility.
Style and user experience suggestions
When implementing a dropdown menu, the HTML structure is just the foundation. To provide a good user experience, it is necessary to implement appropriate styles and interactions through CSS:
- Hide and show: Using CSS's
display: none;anddisplay: block;oropacityandvisibilityproperty, combined:hoveror JavaScript to control the display and hide of the dropdown menu. - transition animationAdd
transitionproperty can make the menu expand and contract more smoothly. - Responsive Design: Make sure that dropdown menus are presented in a user-friendly manner on different devices (especially mobile devices), such as converting to an accordion menu or a sliding menu.
- Accessibility: Consider adding WAI-ARIA attributes to dropdown menus to ensure screen reader users can understand and operate navigation.
By carefully designed navigation structure and style, we can make use of Anqie CMS'snavListtags, providing users with an intuitive and efficient website browsing experience.
Frequently Asked Questions
Q1: Why is the dropdown menu I wrote according to the example code not displayed?
A1: If the drop-down menu does not display, first check your backend navigation settings. Make sure you have added sub-navigation for the relevant navigation items, andtypeIdThe parameter correctly points to the navigation category containing these dropdown items.In addition, HTML structure and CSS style are also crucial.Make sure your CSS rules correctly hide the submenu (for exampledisplay: none;），and it has corresponding display rules when hovering over the parent menu, for exampledisplay: block;）。Finally, check the browser console for any JavaScript errors that might prevent the menu from interacting normally.
Q2: Anqi CMS'snavListDoes the tag support three or more levels of dropdown menus?
A2:navListThe tag itself directly supports two levels of navigation in the returned data structure (i.e.itemanditem.NavList）。If you need to implement a third-level or deeper dropdown menu, you need to check each item in theitem.NavListloop to see if it has its ownNavList, and perform deeper nesting. For example,inner.NavListIt can be used for the third-level menu. However, from the perspective of user experience, too deep navigation levels often confuse users, and it is usually recommended to control the navigation levels within two to three levels.
Q3: How to ensure that my dropdown menu also works on mobile devices?
A3: Pure CSS:hoverThe dropdown menu usually performs poorly on touch screen devices. To achieve a good mobile experience, you need to adopt responsive design strategies.This usually involves using media queries (Media Queries) to modify navigation styles on small screen sizes, such as converting traditional horizontal drop-down menus into vertical accordion menus, drawer menus (Hamburger Menu), or bottom navigation bars.These usually need to be combined with JavaScript to implement the logic for clicking to switch menus, rather than relying solely on hover events.You can use jQuery or other JavaScript frameworks to assist in implementing these interactive effects.