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

2024-01-16 08:38

本文主要是介绍【开发小技巧】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如何实现可悬停的侧面导航效果?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/611944

相关文章

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS?优势:应用场景:DFS配置步骤什么是DFS?DFS指的是分布式文件系统(Distr

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端:安装nfs-utils2、服务端:创建共享目录3、服

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”,帮你按时关掉电脑,而且全程不需要你多做

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作(适用于大文件)四、使用 pand

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1,PDF转Word2,PDF转Excel三、前端页面效果展示总结一

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求:新用户入职 创建一系列账号比较麻烦,打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英