圆角背景导航栏
说明html框架cssjs源代码
说明
实现类似图中 圆角导航效果 当鼠标放在某个导航栏的时候是有选中的效果，并且随着鼠标的移动框会跟着移动，当鼠标点击的时候会有滑动效果
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>
