圆角背景导航栏

最新推荐文章于 2021-03-02 15:08:34 发布

antRain

最新推荐文章于 2021-03-02 15:08:34 发布

阅读量812

点赞数

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

本文链接：https://blog.csdn.net/qq_41146650/article/details/102864956

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

圆角背景导航栏

说明

在这里插入图片描述
实现类似图中圆角导航效果当鼠标放在某个导航栏的时候是有选中的效果，并且随着鼠标的移动框会跟着移动，当鼠标点击的时候会有滑动效果

html框架

利用li 实现列表，选项里包含a标签，为了实现动画效果添加两个li

    <div id="top">
        <ul class="nav">
            <li class="slide1"></li>
            <li class="slide2"></li>
            <li><a class="active" href="#">导航一 </a></li>
            <li><a href="#">导航二</a></li>
            <li><a href="#">导航三</a></li>
            <li><a href="#">导航四</a></li>
        </ul>
    </div>

css

实现列表水平显示采用flex布局
去掉列表前面的 “.” 利用 list-style-type: none;
实现圆角 border-radius 设置元素的外边框圆角
实现阴影：box-shadow: h-shadow v-shadow blur spread color inset;
将列表放入中央，doby采用flex布局，justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
去掉a标签文本的划线： text-decoration: none;
将。.slides1 和a标签居中显示用 display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
用z-index表示元素的堆叠顺序

body {
    display: flex;
    justify-content: center;
}

#top .nav{
    list-style-type: none;
    position: relative; 
    display: flex;
    border: none;
    border-radius: 10em;
    box-shadow:20px 40px 50px #E6E6E6;
    padding: 10px;
}



#top .nav li a{
    position: relative;
    padding: 0.6em 2em;
    font-size: 18px;
    border: none;
    color: #000;
    display:inline-block;
    text-decoration: none;
    z-index:3;
}

实现动画

#top .slide1,
#top .slide2 {
  position: absolute;
  display: inline-block;
  height: 3em;
  border-radius: 10em;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1.05);
}
#top .nav .slide1 {
  background-color: yellowgreen;
  z-index: 2;
}
#top .nav .slide2 {
  opacity: 0;
  background: #fff;
  border: 1px solid #8ab9ff;
  z-index: 1;
}

.squeeze {
  transition: all 1.5s;
  transform: scale(0.9);
}

*,*::before,*::after {
  box-sizing: border-box;
}

js

$("#top a").on("click",function(){
        var position = $(this).parent().position();
        var width = $(this).parent().width();
        $("#top .slide1").css({
            opacity:1,
            left:+position.left,
            width:width
        })
    });
    $("#top a").on("mouseover",function(){
        var position=$(this).parent().position();
        var width = $(this).parent().width();
        $("#top .slide2").css({
            opacity:1,
            left:+position.left,
            width:width
        }).addClass("squeeze");
    });
    $("#top a").on("mouseout",function(){
        $("#top .slide2").css({opacity:0}).removeClass("squeeze");
    })
    var currentWidth=$("#top .nav").find(".active").parent("li").width();
    var current =$(".nav .active").position();
    $("#top .slide1").css({left:+current.left,width:currentWidth});

源代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆角背景导航栏</title>
</head>
<style>
body {
    display: flex;
    justify-content: center;
}

#top .nav{
    list-style-type: none;
    position: relative; 
    display: flex;
    border: none;
    border-radius: 10em;
    box-shadow:20px 40px 50px #E6E6E6;
    padding: 10px;
}



#top .nav li a{
    position: relative;
    padding: 0.6em 2em;
    font-size: 18px;
    border: none;
    color: #000;
    display:inline-block;
    text-decoration: none;
    z-index:3;
}

#top .slide1, #top .slide2{
    position: absolute;
    display: inline-block;
    height: 3em;
    border-radius: 10em;
    transition: all 0.4s cubic-bezier(0.23,1,0.32,1.05);
}

#top .nav .slide1{
    background-color: #FFFF00;
    z-index: 2;
}

#top .nav .slide2{
    opacity: 0;
    border: 1px solid #0B6121;
    z-index: 1;
}

*,*::before,*::after{
    box-sizing: border-box;
}

.squeeze{
    transition: all 1.5s;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
</style>

<body>
    <div id="top">
        <ul class="nav">
            <li class="slide1"></li>
            <li class="slide2"></li>
            <li><a class="active" href="#">导航一 </a></li>
            <li><a href="#">导航二</a></li>
            <li><a href="#">导航三</a></li>
            <li><a href="#">导航四</a></li>
        </ul>
    </div>

</body>
<script src="js/jquery.min.js"></script>
<script >
    $("#top a").on("click",function(){
        var position = $(this).parent().position();
        var width = $(this).parent().width();
        $("#top .slide1").css({
            opacity:1,
            left:+position.left,
            width:width
        })
    });
    $("#top a").on("mouseover",function(){
        var position=$(this).parent().position();
        var width = $(this).parent().width();
        $("#top .slide2").css({
            opacity:1,
            left:+position.left,
            width:width
        }).addClass("squeeze");
    });
    $("#top a").on("mouseout",function(){
        $("#top .slide2").css({opacity:0}).removeClass("squeeze");
    })
    var currentWidth=$("#top .nav").find(".active").parent("li").width();
    var current =$(".nav .active").position();
    $("#top .slide1").css({left:+current.left,width:currentWidth});
</script>
</html>