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