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

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

In today's website design, the navigation menu is no longer just a tool for guiding users through the site, but also an important window for enhancing user experience and showcasing brand vitality.A well-designed, smooth navigation menu, especially one with mouse hover effects or animations, can make a website come alive instantly.As an experienced website operations expert, I know that many AnQiCMS users hope to add such interactivity to their website menus.

It should be clear that content management systems like AnQiCMS have core advantages in efficient content management and data organization, rather than directly providing configuration options for front-end styles or animations.In other words, the AnQiCMS backend provides you with the ability to build a solid 'skeleton' and fill it with rich 'flesh', and to give the navigation menu 'life' and 'soul' through the hover animation effect, it requires the clever application of front-end technology.This article will delve into how to combine AnQiCMS backend configuration 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.

First, you need to log in to the AnQiCMS backend management interface, find“Background Settings”Under the menu“Navigation Settings”. Here 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 to display different content or styles for navigation in different locations, creating different categories will be very helpful.Each 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 contains the following key information:

• Parent navigation:Determined whether the menu item is a top-level navigation or a first, second-level sub-navigation. AnQiCMS supports up to two-level dropdown navigation links, which is enough to meet the needs of most websites.
• Display name:This is the menu text that the user sees on the front page.
• Subtitle name and navigation description:If your design requires, you can add additional subtitles or brief descriptions to menu items, which can all be called in the front-end template.
• Link Type:AnQiCMS provides three flexible link types:
  • Built-in links:Include home page, article/product model home page, and other common links for quick setup.
  • Category page links: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 the size of the number, the smaller the number, the closer it is to the front.

Through these detailed configurations, the AnQiCMS backend builds a clear, hierarchical, and scalable data structure for your navigation menu.These structured data will be extracted and displayed on the front-end page by the template tags.

Template level: Prepare HTML structure for hover animation

AnQiCMS uses a syntax similar to the Django template engine, allowing you to highly customize the HTML structure of the website.To implement the hover effect of the navigation menu, the key is to render the background configured navigation data into HTML code with clear semantics and easy control by the front-end style.

Usually, the HTML code for the navigation menu is located in the common part of the template file, such as in your theme directory.bash.html/partial/header.htmlor directly inindex.htmlReferenced on the page.

You will mainly use AnQiCMS.navListThe tag is used to retrieve navigation data. This tag can traverse the navigation categories and menu items set in the background, including even two-level nested submenus.

This is a typicalnavListTag usage example, showing how to generate an HTML structure with nested submenus:

{# 获取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 designed for<ul>and<li>to the elementclassproperties such asmain-nav/nav-item/sub-menu/sub-menu-itemThese class names are the key hooks for front-end CSS and JavaScript to "grab" elements and apply styles and animations.A clear, semantically named class will make your frontend code easier to write and maintain.

3. Front-end implementation: inject vivid hover effects

Once you have generated a structured HTML navigation menu through AnQiCMS template system, the next step is to animate it with dynamic hover effects using front-end technology (mainly CSS, and possibly JavaScript). This step is entirely within your theme static resource files (public/static/The CSS and JS files are completed under the directory.

1. Implementing basic hover effects with pure CSS.

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 a smooth sliding effect.

`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; /* 添加过渡效果，让变化更平滑 */

}

/* Change text color and background color on mouse hover */ .main-nav .nav-link:hover {

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

}

/* Hide sub-menu */ .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; /* 子菜单的过渡效果 */

}

/* The submenu is displayed when the mouse hovers over the parent navigation item */ .main-nav .nav-item:hover > .sub-menu {

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