手风琴导航栏

最新推荐文章于 2023-09-26 05:16:41 发布

Mm_Dxx

最新推荐文章于 2023-09-26 05:16:41 发布

阅读量473

点赞数

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.youkuaiyun.com/Mm_Dxx/article/details/104160232

本文介绍了一种使用HTML和CSS实现的手风琴效果Tab栏，当鼠标悬停在Tab上时，Tab会水平展开并显示详细内容。此效果利用了CSS的过渡属性和定位，为网页增添了交互性和美观度。

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

效果图：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="https://cdn.bootcss.com/genericons/3.1/genericons.min.css">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0;
        }
        body {
            background-color: #222;
            font-family: Arial, Helvetica, sans-serif;
        }
        .accordion {
            width: 90%;
            height: 200px;
            background-color: #333;
            margin: 50px auto;
            overflow: hidden;
            font-size: 0;
        }
        .accordion .tab {
            width: 80px;
            height: 200px;
            background-color: #444;
            list-style: none;
            display: inline-block;
            border: 1px #333 solid;
            position: relative;
            overflow: hidden;
            transition: all 0.5s ease-in-out 0.1s;
        }
        .tab:hover {
            width: 450px;
        }
        .tab:hover .social a::before {
            margin-left: -100px;
        }
        .tab:hover .social a::after {
            margin-left: -5px;
        }
        .tab .content {
            width: 450px;
            height: 200px;
            background-color: #fff;
            margin-left: 80px;
            padding: 50px 0 0 15px;
            position: relative;
        }
        .content h1 {
            font-size: 25px;
            margin-bottom: 10px;
        }
        .content p {
            font-size: 15px;
            line-height: 15px;
        }
        .social a::before,
        .social a::after {
            width: 80px;
            height: 200px;
            display: block;
            font: normal 30px Genericons;
            color: #fff;
            background-color: #444;
            padding-top: 80px;
            padding-left: 25px;
            position: absolute;
            transition: all 0.4s ease-in-out 0.1s; 
        }
        .social a::after {
            font-size: 48px;
            padding-left: 20px;
            padding-top: 70px;
            margin-left: 85px;
        }
        .youtube a::before,
        .youtube a::after {
            content: '\f213';
        }
        .youtube a::after {
            background-color: #ff0000;
        }

    </style>
</head>
<body>
    <ul class="accordion">
        <li class="tab">
            <div class="social youtube">
                <a href="#">youtube</a>
            </div>
            <div class="content">
                <h1>Youtube</h1>
                <p>
                    heheh neidnei ndaihe kndan hen kduen kdneie 
                </p>
            </div>
        </li>
        <li class="tab">
            <div class="social youtube">
                <a href="#">youtube</a>
            </div>
            <div class="content">
                <h1>Youtube</h1>
                <p>
                    heheh neidnei ndaihe kndan hen kduen kdneie 
                </p>
            </div>
        </li>
        <li class="tab">
            <div class="social youtube">
                <a href="#">youtube</a>
            </div>
            <div class="content">
                <h1>Youtube</h1>
                <p>
                    heheh neidnei ndaihe kndan hen kduen kdneie 
                </p>
            </div>
        </li>
        <li class="tab">
            <div class="social youtube">
                <a href="#">youtube</a>
            </div>
            <div class="content">
                <h1>Youtube</h1>
                <p>
                    heheh neidnei ndaihe kndan hen kduen kdneie 
                </p>
            </div>
        </li>       
    </ul>
</body>
</html>