侧边伸缩导航栏

ZOE^V1

已于 2022-07-03 17:52:29 修改

阅读量529

点赞数

分类专栏： html+css 文章标签： css css3 html

于 2022-07-03 17:52:16 首次发布

本文链接：https://blog.csdn.net/weixin_52568554/article/details/125587184

版权

html+css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧边伸缩导航栏</title>
    <link rel = "stylesheet" href = "https://at.alicdn.com/t/font_2919879_aaakg57syr.css">
	<link rel = "stylesheet" href = "https://at.alicdn.com/t/font_2978232_vsdsu064x6k.css">
	<link rel = "stylesheet" href = "https://at.alicdn.com/t/font_2963692_ao93r6w2bu.css">
    <style>
        *{
            padding: 0;
            margin: 0;
            text-decoration: none;
        }
        /*导航栏整体位置*/
        body{
            display: flex;
            height: 100vh;
            align-items: center;
        }
        /*导航栏整体大小，背景色*/
        .shell{
            width: 20px;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
			background: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
            border-radius: 0 10px 10px 0px;
            /*导航变宽时的过度时间*/
            transition: 0.3s;
        }
        .box{
            /*变成块级元素*/
            display: block;
            height: 15%;
            width: 85%;
            margin: 9px;
            border-radius: 5px;
            position: relative;
            color: black;
        }
        .shell a i{
            font-size: 20px;
            position: absolute;
            margin: 14px 0 0 7px;
            color: black;
            opacity: 0;
        }
        .shell:hover a i {
            font-size: 20px;
            position: absolute;
            margin: 14px 0 0 7px;
            color: black;
            opacity: 1;
        }
        /*在导航第一个和第五个选项下加横线*/
        .box:nth-child(1)::before,.box:nth-child(5)::before{
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background-color: rgb(255, 247, 254);
            position: absolute;
            bottom: -10px;
        }
        /*导航文字设置*/
        .box span{
            position: relative;
            top: 14px;
            left: 35px;
            font-size: 15px;
            /*导航收缩下文字透明不显示*/
            opacity: 0;
        }
        /*导航栏变宽*/
        .shell:hover{
            width: 150px;
        }
        /*当鼠标移到某一项时，背景变色*/
        .box:hover{
            background-color: #9795f0;
            color: #fff;
        }
        .box:hover .fa{
            color: #fff;
        }
        /*文字显现*/
        .shell:hover span{
            opacity: 1;
        }
        i{
            font-size:15px;
        }
    </style>
</head>
<body>
    <div class="shell">
        <a href="#" class="box"><i class="iconfont icon-wojia1"  aria-hidden="true"></i><span>首页</span></a>
        <a href="#" class="box"><i class="iconfont icon-gengduo" aria-hidden="true"></i><span>城市迁出人口</span></a>
        <a href="#" class="box"><i class="iconfont icon-gengduo" aria-hidden="true"></i><span>热搜关键词</span></a>
        <a href="#" class="box"><i class="iconfont icon-gengduo" aria-hidden="true"></i><span>政策支持</span></a>
        <a href="#" class="box"><i class="iconfont icon-gengduo" aria-hidden="true"></i><span>世界人口密度</span></a>
        <a href="#" class="box"><i class="iconfont icon-gengduo" aria-hidden="true"></i><span>影响因素</span></a>
        <a href="#" class="box"><i class="iconfont icon-chexiao" aria-hidden="true"></i><span>返回</span></a>
    </div>
</body>
</html>