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

web前端开发

共 5449字,需浏览 11分钟

 ·

2020-10-19 22:58


编辑 | 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前端学习网:www.webqdkf.com

    
 

接着,我们需要为HTML添加一些效果,所以在这部分中,我们将设计CSS效果:在CSS结构中,我们将使用带有图标的可悬停侧面导航。
以下是CSS代码:
 
最后,我们将两部分内容进行组合,我们将得到以下的最终代码。

    带图标的可悬停导航           
    

web前端开发公众号


主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究,以及同行经验交流,前端开发学习资源的分享。我们提倡终身学习,在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点,每天进步一点点,人生进步一大步!关注我们,与我们一起学习进步。web前端学习网:www.webqdkf.com

  

通过浏览器,我们可以看到最终的输出效果如下:
今天的内容就到这里了。

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

浏览 42
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报