圆角背景导航栏

客官°小女子只卖身不卖艺 2023-05-29 02:52 17阅读 0赞

### 圆角背景导航栏 ###

*   *  说明
     *  html框架
     *  css
     *  js
     *  源代码

## 说明 ##

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

## html框架 ##

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

## 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>

[20191101205400585.jpg]: https://img-blog.csdnimg.cn/20191101205400585.jpg