css选择菜单

心已赠人 2024-04-17 17:39 75阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/673755e01773401b8d2662fe391b1381.png