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

标签：210px top 前端开发 height width HTML 030 30px CSS

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

编辑 | 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>

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

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

今天的内容就到这里了。

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

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

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

标签：210px,top,前端开发,height,width,HTML,030,30px,CSS
From： https://blog.51cto.com/u_15809510/5968415

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

相关文章

赞助商

阅读排行