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

Posted JobsOfferings

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了给自己的博客添加一个侧边栏相关的知识,希望对你有一定的参考价值。

  如何不使用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设计也可以告诉我,我可以试着给大家做出来。

以上是关于给自己的博客添加一个侧边栏的主要内容,如果未能解决你的问题,请参考以下文章

侧边栏添加动画挂件和文字

Blogs添加侧边栏时间小人

Blogs添加侧边栏时间小人

如何为博客园侧边栏添加用户头像

Wordpress在侧边栏sidebar实现微博挂件方法[图]

自制博客侧边栏公告网页链接“图标 ”