css选择菜单

最新推荐文章于 2024-10-10 22:24:37 发布

@呵呵

最新推荐文章于 2024-10-10 22:24:37 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

文章标签： css选择菜单

本文链接：https://blog.youkuaiyun.com/weixin_41639609/article/details/100137299

本文介绍了一个使用纯CSS实现的菜单切换效果，通过不同的radio按钮选择，可以平滑地切换显示不同的菜单内容，同时改变背景颜色。该效果利用了CSS的transform属性进行平移动画，以及:checked伪类来控制菜单项的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择切换菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            display: flex;
            height: 100%;
        }
        .main{
            display: flex;
            flex-direction: column;
            margin: auto;
            width: 300px;
            height: 500px;
            overflow: hidden;
            border-radius: 10px;
           
        }
        .main input:nth-child(1):checked ~ div label:nth-child(1),.main input:nth-child(2):checked ~ div label:nth-child(2),
        .main input:nth-child(3):checked ~ div label:nth-child(3),.main input:nth-child(4):checked ~ div label:nth-child(4){
            background-color: #3c9;
            color: #fff;
        }
        .main input:nth-child(1):checked ~ ul{
            transform: translate(0,0);
        }
        .main input:nth-child(2):checked ~ ul{
            transform: translateX(-25%);
        }
        .main input:nth-child(3):checked ~ ul{
            transform: translate(-50%,0);
        }
        .main input:nth-child(4):checked ~ ul{
            transform: translate(-75%,0);
        }
        .nav{
            display: flex;
        }
        .nav label{
            flex: 1;
            height: 40px;
            background-color: #ccc;
            line-height: 40px;
            text-align: center;
        }
        .view{
            display: flex;
            flex-wrap: nowrap;
            width: 400%;
            height: 100%;
            transition: transform 0.3s;
        }
        .view li{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="main">
            <input id="nav1" type="radio" name="nav" hidden checked>
            <input id="nav2" type="radio" name="nav" hidden>
            <input id="nav3" type="radio" name="nav" hidden>
            <input id="nav4" type="radio" name="nav" hidden>
            <div class="nav">
                <label for="nav1">菜单一</label>
                <label for="nav2">菜单二</label>
                <label for="nav3">菜单三</label>
                <label for="nav4">菜单四</label>
            </div>
            <ul class="view">
                <li style="background-color: aqua;">内容一</li>
                <li style="background-color: cornflowerblue;">内容二</li>
                <li style="background-color: coral;">内容三</li>
                <li style="background-color: chartreuse;">内容四</li>
            </ul>
        </div>
    </div>

</body>
</html>