下划线扩散菜单，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
   <div>
        <ul id="container-menu">
            <li class="menu-item menu-item-active">选项一</li>
            <li class="menu-item">选项二</li>
            <li class="menu-item">选项三</li>
        </ul>
    </div>
</body>

</html>

编辑器加载中

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

            
            body {
  background-color: #fefefe;
}

ul {
        display: flex;
        gap: 10px;
    }
    
    ul li {
        list-style: none;
        cursor: pointer;
        height: 25px;
        transition: all 0.5s;
    }
    
    .menu-item-active {
        font-weight: bold;
        color: #5478F3;
        position: relative;
    }
    
    .menu-item-active::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #5478F3;
        animation: spread 0.5s;
    }
    
    @keyframes spread {
        0% {
            width: 0;
            left: 50%;
        }
        100% {
            width: 100%;
            left: 0;
        }
    }

编辑器加载中

index.js

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14

            
              var menulist = document.querySelectorAll(".menu-item");
    menulist.forEach(element => {
        element.onclick = (e) => {
            //console.log(e.target);
            clearClass('menu-item-active')
            e.target.classList.add('menu-item-active');
        }
    });

    function clearClass(name) {
        menulist.forEach(element => {
            element.classList.remove(name);
        })
    }

编辑器加载中

预览

控制台