CSS简洁导航条

最新推荐文章于 2024-03-08 09:33:17 发布

Zhillery

最新推荐文章于 2024-03-08 09:33:17 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/delete_you/article/details/125412933

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

成品

实现顶部固定导航栏，导航栏左侧为公司LOGO（这里为省事用我的头像代替了），右侧为链接；
实现鼠标经过链接后，下方弹出蓝色条（懒得搞动图了呜呜呜）

屏幕截图 2022-06-22 162153.png

HTML部分

为了简化我们的操作，布局即分为了两个部分，上半部分的导航条header和下半部分的body;
那么针对如下代码，在这里做出一些解释：

section标签用来划分不同模块
我们在header模块下设置了两个nav标签，一个是左侧的LOGO，一个是右侧的链接，为的是便于后续使用flex布局
这里使用无序列表ul来制作右侧链接，注意li中需要再次嵌套一个a标签！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nav1</title>

    <!-- 导入外部CSS文件 -->
    <link rel="stylesheet" href="./nav1.css">
</head>
<body>
    <!-- 顶部导航栏模块 -->
    <section class="header">
        <nav class="hd-left">
            <img src="./zhiyiyi.jpg">
        </nav>
        <nav class="hd-right">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">Detail</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </section>

    <!-- 中部body模块 -->
    <section class="main">
        
    </section>
</body>
</html>

CSS部分

我们需要对总页面进行清边处理（即设置margin和padding均为0），其次设置好body的背景；
.main为网站主干内容，为其设置一定的高度以便后续测试固定导航栏；

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: white;
}
.main{
    background-color: white;
    height: 3000px;
}

对超链接标签a的设置
text-decoration: none; 清除超链接的下划线装饰
color: black; 把默认的蓝色字体变成黑色的
a:hover{} 我们需要在鼠标经过（hover）标签时改变文字颜色，注意配合transition使用

a{
    text-decoration: none;
    color: black;
    
    transition: all 0.3s ease;
}
a:hover{
    color: deepskyblue;
}

对整个header的设置

宽占据100%，高度60px即可
使用flex布局，按行分布，justify-content: space-between即可实现两个nav左右靠边布局
align-items: center; 垂直方向居中
position: fixed; 设置导航栏是固定的，此时还需要额外设置好background-color属性
.hd-left>img 该选择器设置左侧LOGO的宽高以便适配导航栏大小

.header{
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;

    background-color: white;
    position: fixed;
}

.hd-left>img{
    width: 50px;
    height: 50px;
    margin-left: 10px;
}

右侧导航链接设置
首先必须指定好右侧nav的整体宽高，并使用line-height实现子标签的居中效果；
.hd-right ul 中主要是对无序列表默认前方原点进行了清除，同时设置浮动布局和平均分布使子标签li布局更加合理；
overflow: hidden 是为了防止可能的伪元素溢出的状况

.hd-right{
    width: 320px;
    line-height: 50px;
    margin-right: 10px;
}

.hd-right ul{
    list-style: none;
    font-size: 18px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: space-evenly;
 
    overflow: hidden;
}

.hd-right ul li {
    width: 80px;
    display: flex;
    justify-content: center;
    align-content: center;

    position: relative;
    overflow: hidden;
}

伪元素实现连接下方蓝色引导条显示消失
整体思路：
一个基于li标签的伪元素，这样子我们设置的四个li标签都同时具有该伪元素；对于伪元素我们必须要设置其position:absolute，并且他的上一级也就是ul设置position:relative;
其次，对于一个伪元素，还同时需要具有定位、宽高、content属性，才会完整的显示出来！！！
所有都设置好后，我们将原始的伪元素颜色配置为透明transparent，在经过hover触发后更改背景颜色从而实现渐变效果

border-radius 这里不设置为50%而是直接取width的一半，是因为我们制作的动画需要对该伪元素进行横向伸长，如果设置为50%，那么缩放效果会导致整个图形变成一个椭圆，而我们的本意是让他显示为一个圆角矩形，所以不能使用50%设置

.hd-right ul li::after{
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 2px;
    bottom: 0;
    background-color: transparent;
    
    transition: all 0.3s ease;
}
.hd-right ul li:hover::after{
    background-color: deepskyblue;
    width: 20px;
}