给自己的博客添加一个侧边栏

Posted 2020-11-26 JobsOfferings

　　如何不使用JS，给自己的博客添加一个酷酷的侧边导航栏呢？详情请查看右侧导航栏，这是我自己做的一个导航栏，分别作用是：展示手机号，展示QQ，展示微信，跳转自己想要的网址（这里我放的是自己的还未完成的博客）

　　分析一下这个侧边栏，首先是需要他不影响内部其他DOM元素并处于页面右侧，那么应该给他添加position:fixed;使它固定于页面右侧。

　　注意，如果是想要给自己另作的网页，意思是可以使用JS的话，可以在window onload和resized的时候计算窗口高度WHeight与该侧边栏高度height，使得top等于二分之一的WHeight减去二分之一的height。

　　紧接着是侧边栏的位移与颜色变化，如果想要良好的视觉感受但是动画相对比较简单的话，可以使用transition

CSS代码

.pageRightFloat {
    position: fixed;
    width: 200px;
    top: 200px;
    right: -150px;
    transition: top .4s ease 0s;
    transition-delay: .1s;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, .3);
}

.pageRightFloat>div {
    float: left;
    background-color: #31353D;
    transition: backgroundColor 0.4s ease-in-out 0s;
    transition: transform .8s ease 0s;
    cursor: pointer;
}

.pageRightFloat>div:hover {
    background-color: #3EA3FF;
}

.pageRightFloat>div:nth-child(1):hover {
    transform: translateX(-150px);
}

.pageRightFloatImgArea {
    box-sizing: border-box;
    float: left;
    width: 50px;
    height: 50px;
}

.pageRightFloatImgArea img {
    width: 30px;
    height: 30px;
    margin: 10px;
}

.pageRightFloatTelArea {
    box-sizing: border-box;
    float: left;
    width: 150px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    letter-spacing: 0.1em;
    text-align: center;
}

.pageRightFloatImgArea:last-child {
    width: 200px;
}
.pageRightFloatQQArea, .pageRightFloatWeiXinArea {
    box-sizing: border-box;
    position: relative;
    width: 120px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.4s ease-in-out 0s;
}

.pageRightFloatQQArea>img, .pageRightFloatWeiXinArea>img {
    box-sizing: border-box;
    position: absolute;
    top: -30px;
    left: -120px;
    width: 100px;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(90deg, #4e4efe 0%, #7e67fa 100%);
}

.pageRightTriangle {
    position: absolute;
    top: 25px;
    left: -20px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-left: 5px solid #7e67fa;
    border-bottom: 4px solid transparent;
}

html

<div class="pageRightFloat">
    <div>
        <div class="pageRightFloatImgArea">
            <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063254%E7%94%B5%E8%AF%9D.png" alt="TelIcon" />
        </div>
        <div class="pageRightFloatTelArea">
            <p>14797992768</p>
        </div>
    </div>
    <div>
        <div class="pageRightFloatImgArea">
            <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063250QQ.png" alt="QQIcon" />
            </div>
            <div class="pageRightFloatQQArea">
                <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063301qqcode.jpg" alt="qqcode" />
                <div class="pageRightTriangle"></div>
            </div>
        </div>
        <div>
            <div class="pageRightFloatImgArea">
                <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063258%E5%BE%AE%E4%BF%A1.png" alt="WeiXinIcon" />
            </div>
            <div class="pageRightFloatWeiXinArea">
                <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063304weixincode.png" alt="weixincode" />
                <div class="pageRightTriangle"></div>
            </div>
        </div>
        <div>
                <div class="pageRightFloatImgArea">
                        <a href="http://www.jobsofferings.cn/">
                                <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119093157%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5.png" alt="linkIcon" />
                        </a>         
                </div>
        </div>
</div>

这里的img是存在了博客园后面的相册里，然后取的文件链接。

想创意其实是一个比较难的东西，其他的其实没有什么难度，大家有什么好看的UI设计也可以告诉我，我可以试着给大家做出来。