How to configure the mouse hover effect or animation of navigation menu items in AnQiCMS backend?

Master AnQiCMS navigation menu hover animation: the perfect combination of backend configuration and frontend ingenuity

On modern website design, navigation menus are no longer just tools to guide users through the site, they are also important windows to enhance user experience and showcase brand vitality.An elegantly designed, smooth-interactive navigation menu, especially a menu with mouse hover effects or animation, can instantly bring a website to life.As an experienced website operations expert, I know that many AnQiCMS users hope to add such interactivity to their website menus.

But it should be clear that the core advantage of a content management system like AnQiCMS lies in efficient content management and data organization, rather than directly providing configuration options for frontend styles or animations.换句话说，AnQiCMS后台为您提供了构建坚实“骨架”和填充丰富“血肉”的能力，而赋予导航菜单“生命”和“灵魂”的悬停动效，则需要通过前端技术的巧妙运用。This article will delve into how to combine the backend configuration of AnQiCMS with front-end development skills to achieve this goal.

I. AnQiCMS backend: building a flexible navigation data skeleton

The strength of AnQiCMS lies in its flexible data management capabilities, the construction of the navigation menu is one of its typical applications.The backend management system provides an intuitive way to define and organize the navigation structure of the website, laying a solid foundation for the frontend animation implementation.

Firstly, you need to log in to the backend management interface of AnQiCMS, find“Backend Settings”the menu underNavigation Settings. This is where you define all the website navigation.

In the "Navigation Settings", you will see"Navigation Category Management".AnQiCMS allows you to create multiple navigation categories, such as “Top Main Navigation”, “Footer Navigation” or “Sidebar Navigation” and so on.If your website needs different navigation displays with different content or styles in different locations, creating different categories will be very helpful.Every navigation category has a unique ID, which will be used in subsequent template calls.

Next, it is“Navigation link settings”. Here, you can add specific menu items for the selected navigation category. Each menu item includes the following key information:

• Parent Navigation:Decided whether the menu item is a top-level navigation or a first or second-level sub-navigation. AnQiCMS supports up to two levels of dropdown navigation links, which is sufficient to meet the needs of most websites.
• Display Name:This is the menu text that the user sees on the front-end page.
• Subtitle name and navigation description:If your design requires, you can add additional subtitles or short descriptions to menu items, which can all be called from the front-end template.
• Link type:AnQiCMS provides three flexible link types:
  • Built-in Links:Including home page, article/product model home page and other common links, convenient for quick settings.
  • Category page link:You can directly select existing article categories, product categories, or single pages as navigation links, which greatly enhances the association between content and navigation.
  • External links:Allow you to enter any URL, whether it is a specific page within the site or an external website link.
• Display Order:Control the order of menu items by number size, the smaller the number, the closer to the front.

Through these detailed configurations, AnQiCMS' backend has constructed a clear, hierarchical, and scalable data structure for your navigation menu.These structured data will be extracted and displayed on the frontend page using template tags.

二、Template Level: Prepare HTML structure for hover animation

AnQiCMS uses a syntax similar to Django template engine, allowing you to highly customize the HTML structure of the website.To achieve the hover effect of the navigation menu, the key is to render the navigation data that has been configured backstage into clear and semantically meaningful HTML code that is easy for the frontend to control styles.

Generally, the HTML code for the navigation menu is located in the common part of the template file, such as in the theme directory under yourbash.html/partial/header.htmlor directly in theindex.htmlThis page is referenced.

You will mainly use AnQiCMS.navListLabel to retrieve navigation data. This label can traverse the navigation categories and their included menu items set in the background, even the two-level nested submenus.

Here is a typicalnavListLabel usage example, showing how to generate an HTML structure with a nested submenu:

{# 获取ID为1的默认导航类别数据 #}
{% navList navs with typeId=1 %}
<ul class="main-nav"> {# 为主导航添加一个class，方便CSS选择器定位 #}
    {%- for item in navs %} {# 循环遍历一级导航项 #}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}" class="nav-link">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断是否有二级子导航 #}
            <ul class="sub-menu"> {# 为子菜单添加class，方便CSS/JS控制 #}
                {%- for inner in item.NavList %} {# 循环遍历二级子导航项 #}
                    <li class="sub-menu-item {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}" class="sub-menu-link">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In the above code, we specifically set the following attribute:<ul>and<li>Element was addedclassattribute, such asmain-nav/nav-item/sub-menu/sub-menu-itemEnglish.These class names are the key 'hooks' that front-end CSS and JavaScript use to 'grasp' elements and apply styles and animations.A clear and semantically named class will make your frontend code easier to write and maintain.

Three, front-end implementation: inject vivid hover animation effect

Once you have generated a structured HTML navigation menu using AnQiCMS template system, the next step is to animate it with frontend technologies (mainly CSS, and can also be combined with JavaScript). This step is completely in your theme static resource files (public/static/The CSS and JS files under the directory are completed.

1. Pure CSS implementation of basic hover effect

For most common hover effects, such as changing text color, background color, underline, simple displacement, or transparency changes, pure CSS can handle it perfectly. CSS'stransitionThe attribute is the key to achieving smooth sliding effects.

`css /* Define the default style for navigation links */ .main-nav .nav-link {

color: #333;
padding: 10px 15px;
display: block;
text-decoration: none;
transition: all 0.3s ease-in-out; /* 添加过渡效果，让变化更平滑 */

}

/* Mouse hover to change text color and background color */ .main-nav .nav-link:hover {

color: #007bff;
background-color: #f0f0f0;
transform: translateY(-2px); /* 向上轻微移动2像素 */

}

/* Hide submenu */ .main-nav .sub-menu {

display: none; /* 默认隐藏 */
position: absolute; /* 绝对定位，脱离文档流 */
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
min-width: 160px;
z-index: 1000;
opacity: 0; /* 初始透明度为0 */
transform: translateY(10px); /* 初始位置向下偏移 */
transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* 子菜单的过渡效果 */

}

display: block; /* 显示子菜单 */