How can I build and display a multi-level nested category navigation menu?
Build and display multi-level nested category navigation menus in Anqi CMS, which is an important link in website content organization and user experience optimization.A well-designed and hierarchical navigation not only helps visitors quickly find the information they need, but also provides clear website structure signals to search engines, thereby enhancing SEO effects.
AnQi CMS is an enterprise-level content management system developed in Go language, with the flexibility of the content model and the strong support of template tags, making the implementation of multi-level classification navigation very intuitive and efficient.Next, we will discuss how to step by step build such navigation.
Backstage preparation: Build your content skeleton
Before starting to make a beautiful navigation menu, we need to set up the skeleton of content categories in the Anqi CMS backend.This is like designing the load-bearing structure of a building, which is the foundation for all subsequent displays.
First, you need to enter the "Content Management" module under the "Document Classification" page.Here, you can create various categories to organize the content of your website.When creating a category, you need to select a "document model" for it (such as "article model" or "product model"), which determines the content types and fields that can be published under this category.
The key to building multi-level navigation is to set the 'parent category'. For example, if you want to create a navigation about 'electronic products', you can:
- Create a top-level category named 'Electronics' without selecting any parent category.
- Under "Electronics", create secondary categories such as "Smartphone", "Laptop", and set their "parent category" to "Electronics".
- If you need a deeper level, you can continue to create 'Android phone', 'Apple phone' and other three-level classifications under 'Smartphone', and set their 'parent classification' to 'Smartphone'.
Through this method, the background category management interface will clearly present a tree-like hierarchical structure, laying a solid foundation for the front-end navigation display.
Template implementation: Flexible display of multi-level menus
The AnQi CMS template system adopts a concise syntax similar to Django, through built-in tags, we can conveniently call back-end data and display it flexibly. The core of building multi-level classification navigation is to usecategoryList.
1. Call the top-level category
First, we can usecategoryListtags to get all top-level categories, which are usually used as your main navigation menu items.
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for item in categories %}
<li><a href="{{ item.Link }}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
here,moduleId="1"Suppose you are calling the classification under the 'Article Model' (the specific ID needs to be determined according to the model ID set in your background),parentId="0"This means to get only the top-level categories without parent categories.item.LinkIt will output the access link of the category,item.TitleThen output the name of the category.
2. Implement multi-level nesting
The essence of multi-level navigation lies in 'nested'. AnQi CMS.categoryListLabel combinationforLoops and conditional judgments can easily achieve arbitrary depths of nesting. We can check in each loop iteration whether a category has subcategories (viaitem.HasChildrenfield), and if so, call it againcategoryListGet and display these subcategories.
Here is an example of a three-level category navigation code:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for item in categories %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 判断当前分类是否有子分类 #}
{% if item.HasChildren %}
<ul class="sub-nav">
{# 获取当前分类的子分类，parentId设置为当前item的ID #}
{% categoryList subCategories with parentId=item.Id %}
{% for subItem in subCategories %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{subItem.Title}}</a>
{# 如果子分类还有更深层级，可以继续嵌套 #}
{% if subItem.HasChildren %}
<ul class="sub-sub-nav">
{% categoryList deepSubCategories with parentId=subItem.Id %}
{% for deepSubItem in deepSubCategories %}
<li class="deep-sub-nav-item {% if deepSubItem.IsCurrent %}active{% endif %}">
<a href="{{ deepSubItem.Link }}">{{deepSubItem.Title}}</a>
{# 理论上可以继续嵌套，但通常不建议导航层级过深，以免影响用户体验 #}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
In this code, we first obtain the top-level category, and then within the loop of each top-level category, we useitem.HasChildrento determine if there is a subcategory. If there is, we use it againcategoryListLabel, andparentIdThe parameter is set to the current top-level category ofitem.IdThis process allows you to obtain the sub-categories. This process can be nested according to your actual needs to support more hierarchical levels of categorization.
item.IsCurrentThis field is also very useful, it can help you determine whether the category currently being looped to is the category corresponding to the page being visited by the user or its ancestor category, so that you can add it in CSS.activea class name to highlight display.
3. Style beautification
Although the above code has constructed a multi-level navigation HTML structure, in order to visually present the level and beauty, it still needs to be配合CSS styles. You can design your website according to your own design, to.main-nav,.sub-nav,.deep-sub-navand their internalliandaAdd appropriate styles to the tags, such as usingdisplay: none;and JavaScript or CSS's:hoverpseudo-classes to achieve the interactive effect of dropdown menus.
Further optimization and consideration.
- Highlight the current page:To enhance users