Building an efficient and user-friendly website navigation in AnQi CMS is a key factor in enhancing user experience.Especially for content-rich websites, dropdown menus can help users quickly locate the information they need while keeping the page neat.navListTags, allowing website operators to flexibly implement this effect in templates.
Understanding the navigation management mechanism of Anqi CMS
In-depth explorationnavListBefore the label, we first need to understand how the Safe CMS manages the website navigation.In the backend of Anqi CMS, the navigation menu configuration is located under the 'Navigation Settings' module in the 'Backend Settings'.Here you can not only set the default navigation at the top, but also add custom navigation at other positions according to the specific needs of the website, such as footer navigation or sidebar navigation.Each navigation category can include multi-level navigation links, and the current system supports up to two levels of dropdown menus, which lays a foundation for achieving a standard two-level dropdown menu effect.
navListBasic usage of tags
navListLabels are the core tools used to obtain the page navigation list in the AnQi CMS template. Their basic usage method is{% navList navs %}...{% endnavList %}Here,navsis a custom variable name, you can name it according to your habit, 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:
typeIdThis is the ID of the backend navigation category.安企CMS allows you to create multiple navigation categories (such as, 'Main navigation', 'Footer navigation', etc.), each category has a unique ID.typeIdYou can optionally call a specific category of navigation menu. If not specifiedtypeIdThe system will usually default to the navigation category with ID 1.siteIdThis parameter is used in multi-site management scenarios. If you have created multiple sites in the background and want to call navigation data from other sites,siteIdTo implement. For single-site settings, this parameter is usually not required.
navListThrough the label inside.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 that the navigation item points to.IsCurrent: An boolean value indicating whether the current navigation item is the navigation item of the current page, commonly used to add a class to highlight.activeClass to highlight.NavList: This is a very critical field. If the current navigation item has child navigation,NavListThis 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 usefornested loopsitem.NavListto determine if there is a submenu.
The following is a typical code structure that demonstrates how to usenavListBuild an HTML structure with a two-level dropdown menu:
<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 outer layerforLoop through the top-level navigation items. Inside each top-level navigation item,{% if item.NavList %}determine if the item has a sub-navigation. If it exists, aulelement is rendered as a dropdown menu, and the innerforto iterateitem.NavListEnglish of the sub-navigation items.IsCurrentField used to add for the currently active menu item.activeClass for easy highlighting through CSS.
Please note that the above code mainly focuses on the HTML structure.The actual dropdown menu animation (such as, displayed on mouse hover, switched on click) and visual style (such as background color, font, border) all need to be implemented through custom CSS and JavaScript.
Advanced Application: Nested categories and documents in dropdown menus.
navListThe power of it is not limited to displaying simple links.As website operators, we often need to display more content based on navigation items, such as the subcategory list under a certain category, even the latest documents under that category.categoryListandarchiveListNested in (parentheses).navListin the loop, thus achieving a more dynamic and functional dropdown menu.
Consider a scenario where you want to display not only the product categories under the "Products" menu in the main navigation, but also 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 is.PageIdThe field stores the corresponding category ID.{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}We can dynamically retrieve and display 8 product documents under this category, thus presenting richer content in the dropdown menu.
Another common requirement is to display nested subcategories in the dropdown menu.For example, under the main navigation "About UsnavListCombinecategoryListImplementation:
<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, the security CMS provides great flexibility.navListThe design of the tag for website navigation provides 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, appropriate styles and interactions must be achieved through CSS:
- Hide and show: Utilizing CSS's
display: none;anddisplay: block;oropacityandvisibilityattributes, combined with:hoveror JavaScript to control the display and hide of the dropdown menu. - Transition AnimationAdd
transitionproperty can make the menu expand and collapse more smoothly. - Responsive Design: Ensure that the dropdown menu is presented in a friendly manner on different devices (especially mobile devices), such as converted to an accordion menu or a sliding menu.
- Accessibility: Consider adding WAI-ARIA attributes to the dropdown menu to ensure screen reader users can understand and operate the navigation.
Through carefully designed navigation structures and styles, we can make full use of the security CMS.navListTags provide users with an intuitive and efficient website browsing experience.
Frequently Asked Questions
Q1: Why didn't the dropdown menu I wrote according to the example code display?
A1If the dropdown menu is not displayed, please first check your backend navigation settings. Make sure you have added a sub-navigation for the corresponding navigation item.typeIdThe parameter correctly points to the navigation category containing these dropdown items.In addition, HTML structure and CSS style are also crucial.display: none;），and there are corresponding display rules when the parent menu is hovered over (for exampledisplay: block;）。Finally，check the browser console for any JavaScript errors that might prevent the menu from interacting normally.
Q2: About CMS of thenavListLabel supports three-level or more dropdown menus?
A2:navListThe label itself directly supports two-level navigation in the returned data structure (i.e.itemanditem.NavList）。If you need to implement a three-level or deeper dropdown menu, you need toitem.NavListcheck each sub-item again in the loop 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 keep the navigation levels within two to three levels.
Q3: How can I ensure that my dropdown menu works on mobile devices?
A3: Pure CSS:hoverThe dropdown menu usually performs poorly on touch screen devices.In order to achieve a good experience on mobile devices, you need to adopt responsive design strategies.This usually involves using media queries (Media Queries) to modify the navigation style on small screen sizes, such as converting traditional horizontal dropdown menus into vertical accordion menus, drawer menus (Hamburger Menu), or bottom navigation bars.These usually require combining JavaScript to implement the click-to-toggle menu logic, rather than relying solely on hover events.You can use jQuery or other JavaScript frameworks to assist in implementing these interactive effects.