基于css的水平动态导航菜单效果的实现

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页的布局和外观，包括颜色、字体、间距等。

水平动态导航菜单是一种常见的网页设计元素，通常用于网站的顶部或侧边栏，提供用户访问不同页面的链接。这种菜单可以是静态的，也可以是动态的，即根据用户的交互或其他条件改变其显示方式。

类型

纯CSS实现：通过CSS选择器和伪类（如:hover、:active）实现简单的动态效果。
JavaScript辅助：结合JavaScript实现更复杂的动态效果，如响应式菜单、下拉菜单等。

应用场景

网站导航：适用于各种类型的网站，提供清晰的导航路径。
响应式设计：在不同设备和屏幕尺寸上都能良好显示。
交互式网站：增强用户与网站的互动性。

实现方法

纯CSS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Dynamic Navigation Menu</title>
    <style>
        .nav {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav li {
            padding: 10px 20px;
            cursor: pointer;
        }
        .nav li:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</body>
</html>

JavaScript辅助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Dynamic Navigation Menu</title>
    <style>
        .nav {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav li {
            padding: 10px 20px;
            cursor: pointer;
        }
        .active {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <ul class="nav" id="nav">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
    <script>
        document.getElementById('nav').addEventListener('click', function(event) {
            const current = document.querySelector('.active');
            if (current) {
                current.classList.remove('active');
            }
            event.target.classList.add('active');
        });
    </script>
</body>
</html>