侧边栏1

最新推荐文章于 2024-09-18 16:00:00 发布

转载最新推荐文章于 2024-09-18 16:00:00 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuanyuan-1994/p/8781384.html

文章标签：

#javascript #ViewUI

本文介绍了一种网页中常见的侧边栏悬浮效果的实现方式，通过CSS样式设置，包括定位、过渡效果等属性，使得侧边栏在滚动页面时仍保持在屏幕一侧，并在鼠标悬停时显示更多内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .side{
            width: 54px;
            height: 270px;
            position: fixed;
            right: 0;
            top: 200px;
        }
        ul li{
            position: relative;
            width: 54px;
            height: 54px;
            border-bottom: 1px solid #FFFFFF;
            float: left;
        }
        ul li .sidebox:hover{
            width: 150px;
            background: #ae1c1c;
        }
        ul li .sidebox{
            position: absolute;
            width: 54px;
            height: 54px;
            vertical-align:middle;
            top: 0;
            right: 0;
            transition: all 0.3s;
            background: #000;
            opacity: 0.8;
            filter: Alpha(opacity=80);
            color: #fff;
            font: 14px/54px "微软雅黑";
            overflow: hidden;
        }
        .side ul li .sidetop{width:54px;height:54px;line-height:54px;display:inline-block;
            background:#000;opacity:0.8;filter:Alpha(opacity=80);transition:all 0.3s;}
        .side ul li .sidetop:hover{background:#ae1c1c;opacity:1;filter:Alpha(opacity=100);}
    </style>
</head>
<body>
<div class="side">
    <ul>
        <li><a href="#"><div class="sidebox"><img src="image/slide2.png">客服中心</div></a></li>
        <li><a href="#"><div class="sidebox"><img src="image/slide2.png">客户案例</div></a></li>
        <li><a href="javascript:void(0);" ><div class="sidebox"><img src="image/slide2.png">QQ客服</div></a></li>
        <li><a href="javascript:void(0);" ><div class="sidebox"><img src="image/slide2.png">新浪微博</div></a></li>
        <li style="border:none;"><a href="#" class="sidetop"><img src="image/slide22.png"></a></li>
    </ul>
</div>
<script>

</script>
</body>
</html>