本文主要是介绍【开发小技巧】030—用HTML与CSS如何实现可悬停的侧面导航效果？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
编辑 | web前端开发（ID：web_qdkf)
今天，我们将与大家分享一种带图标的可悬停侧边导航栏的制作方法，主要用到的还是HTML和CSS。
想要实现在导航栏上附加图标，这个实现的方式有很多种，但今天这个方法是采用字体图标来实现，这些图标都来源于FontAwesome。
在这里，我们提供了一个线上的字体图标链接地址。采用这样的图标式导航设计，会让人感觉比纯文本的老式设计要酷。
在今天的内容中，我们将使用侧面导航栏创建侧面的结构，使用HTML创建导航条结构部分；采用CSS创建设计效果，即“设计结构”。
在创建HTML结构时，我们需要添加上字体图标Font-Awesome的CSS文件链接，这些图标主要用作悬停导航栏。
以下是HTML代码：
<!DOCTYPE html> <html> <head> <title> 带图标的可悬停导航 </title> </head> <body> <div class="banner"> <h1>web前端开发公众号</h1> <p> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。 </p> </div> <div class="hoverable-topic"> <h3>web前端开发公众号</h3> <p> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：www.webqdkf.com </p> </div> <div class="sidehoverbar"> <a href="http://www.webqdkf.com/qdkf/" class="article"> 前端开发 <i class="fa fa-edit"></i> </a> <a href="http://www.webqdkf.com/qdkj/" class="Interview"> 前端框架 <i class="fa fa-file-o"></i> </a> <a href="http://www.yang5460.com" class="Scripter"> 杨小二小江湖 <i class="fa fa-commenting"></i> </a> <a href="http://www.webqdkf.com/mb/" class="Suggested"> 网站模板 <i class="fa fa-plus"></i> </a> <a href="http://www.webqdkf.com/tx/" class="Practice"> 代码案例 <i class="fa fa-laptop"></i> </a><a href="http://www.webqdkf.com/zyk/" class="Practice1"> 学习资源 <i class="fa fa-camera"></i> </a> <a href="http://www.webqdkf.com/webdh.html" class="Practice2"> 网址导航 <i class="fa fa-tasks"></i> </a> <a href="http://www.webqdkf.com/gksj.html" class="Practice3"> 极客时间 <i class="fa fa-paste"></i> </a> </div> </body>
</html>
接着，我们需要为HTML添加一些效果，所以在这部分中，我们将设计CSS效果：在CSS结构中，我们将使用带有图标的可悬停侧面导航。
以下是CSS代码：
<style> .banner { text-align: center; width: ; } h1 { color: #1ab1cc; } .sidehoverbar a { background-color: #1ab1cc; position: absolute; font-size: 22px; text-decoration: none; Color: white; padding: 10px; border-radius: 0px 25px 25px 0px; left: -190px; transition: 0.5s; opacity: 0.5; } .sidehoverbar a:hover { left: 0px; opacity: 1; background-color: #757a7b; } .sidehoverbar i { float: right; } .article { top: 50px; width: 210px; height: 30px; } .Interview { top: 110px; width: 210px; height: 30px; } .Scripter { top: 170px; width: 210px; height: 30px; } .Suggested { top: 230px; width: 210px; height: 30px; } .Practice { top: 290px; width: 210px; height: 30px; } .Practice1 { top: 350px; width: 210px; height: 30px; } .Practice2 { top: 410px; width: 210px; height: 30px; } .Practice3 { top: 470px; width: 210px; height: 30px; } .hoverable-topic { margin-left: 55px; } </style>
最后，我们将两部分内容进行组合，我们将得到以下的最终代码。
<!DOCTYPE html> <html>
<head> <title>带图标的可悬停导航</title> <link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .banner { text-align: center; width: ; } h1 { color: #1ab1cc; } .sidehoverbar a { background-color: #1ab1cc; position: absolute; font-size: 22px; text-decoration: none; Color: white; padding: 10px; border-radius: 0px 25px 25px 0px; left: -190px; transition: 0.5s; opacity: 0.5; } .sidehoverbar a:hover { left: 0px; opacity: 1; background-color: #757a7b; } .sidehoverbar i { float: right; } .article { top: 50px; width: 210px; height: 30px; } .Interview { top: 110px; width: 210px; height: 30px; } .Scripter { top: 170px; width: 210px; height: 30px; } .Suggested { top: 230px; width: 210px; height: 30px; } .Practice { top: 290px; width: 210px; height: 30px; } .Practice1 { top: 350px; width: 210px; height: 30px; } .Practice2 { top: 410px; width: 210px; height: 30px; } .Practice3 { top: 470px; width: 210px; height: 30px; } .hoverable-topic { margin-left: 55px; } </style> </head>
<body> <div class="banner"> <h1>web前端开发公众号</h1> <p> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。 </p> </div> <div class="hoverable-topic"> <h3>web前端开发公众号</h3> <p> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：www.webqdkf.com </p> </div> <div class="sidehoverbar"> <a href="http://www.webqdkf.com/qdkf/" class="article"> 前端开发 <i class="fa fa-edit"></i> </a> <a href="http://www.webqdkf.com/qdkj/" class="Interview"> 前端框架 <i class="fa fa-file-o"></i> </a> <a href="http://www.yang5460.com" class="Scripter"> 杨小二小江湖 <i class="fa fa-commenting"></i> </a> <a href="http://www.webqdkf.com/mb/" class="Suggested"> 网站模板 <i class="fa fa-plus"></i> </a> <a href="http://www.webqdkf.com/tx/" class="Practice"> 代码案例 <i class="fa fa-laptop"></i> </a><a href="http://www.webqdkf.com/zyk/" class="Practice1"> 学习资源 <i class="fa fa-camera"></i> </a> <a href="http://www.webqdkf.com/webdh.html" class="Practice2"> 网址导航 <i class="fa fa-tasks"></i> </a> <a href="http://www.webqdkf.com/gksj.html" class="Practice3"> 极客时间 <i class="fa fa-paste"></i> </a> </div> </body>
</html>
通过浏览器，我们可以看到最终的输出效果如下：
今天的内容就到这里了。
PS：左边有一条黑的边框，这个是录屏器的问题，这个在实现的时候，是没有黑色线条的，请直接忽略就好了。
这篇关于【开发小技巧】030—用HTML与CSS如何实现可悬停的侧面导航效果？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
