【开发小技巧】030—用HTML与CSS如何实现可悬停的侧面导航效果？-技术圈

编辑 | web前端开发（ID：web_qdkf)

今天，我们将与大家分享一种带图标的可悬停侧边导航栏的制作方法，主要用到的还是HTML和CSS。

想要实现在导航栏上附加图标，这个实现的方式有很多种，但今天这个方法是采用字体图标来实现，这些图标都来源于FontAwesome。

在这里，我们提供了一个线上的字体图标链接地址。采用这样的图标式导航设计，会让人感觉比纯文本的老式设计要酷。

在今天的内容中，我们将使用侧面导航栏创建侧面的结构，使用HTML创建导航条结构部分；采用CSS创建设计效果，即“设计结构”。

在创建HTML结构时，我们需要添加上字体图标Font-Awesome的CSS文件链接，这些图标主要用作悬停导航栏。

以下是HTML代码：

        </span></code><code><span class="code-snippet_outer">       带图标的可悬停导航</span></code><code><span class="code-snippet_outer">       
             web前端开发公众号
                          主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。        
     
 
             web前端开发公众号
                           主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：www.webqdkf.com        
     
 
                       前端开发                      
                     前端框架                      
                     杨小二小江湖                      
                     网站模板                      
                     代码案例                         
                         学习资源                      
                     网址导航                      
                     极客时间

接着，我们需要为HTML添加一些效果，所以在这部分中，我们将设计CSS效果：在CSS结构中，我们将使用带有图标的可悬停侧面导航。

以下是CSS代码：

最后，我们将两部分内容进行组合，我们将得到以下的最终代码。

  
     带图标的可悬停导航                
              web前端开发公众号
 
                     主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。        
     
                web前端开发公众号
 
                     主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：www.webqdkf.com        
     
                            前端开发                      
                     前端框架                      
                     杨小二小江湖                      
                     网站模板                      
                     代码案例                         
                         学习资源                      
                     网址导航                      
                     极客时间

通过浏览器，我们可以看到最终的输出效果如下：

今天的内容就到这里了。

PS：左边有一条黑的边框，这个是录屏器的问题，这个在实现的时候，是没有黑色线条的，请直接忽略就好了。