这篇文章,我给大家分享一个导航菜单的效果。用css+JS实现,效果如图:
本例实现效果:当鼠标移动到其他菜单项时,会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后,被点击的菜单名称文字字体会加粗。
现在,看看简单的菜单布局结构:
<ul>
<span class="li_bg"></span> <!-- 滑动的背景色 -->
<li><a href="###">首页</a></li>
<li><a href="###">热播剧集</a></li>
<li><a href="###">最新电影</a></li>
<li><a href="###">影业资讯</a></li>
<li><a href="###">娱乐八卦</a></li>
<li><a href="###">明星图库</a></li>
</ul>
非常清爽简洁的标准菜单结构,css也很简单:
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
html,
body {
height: 100%;
width: 100%;
background: #ececec;
}
a {
text-decoration: none;
}
ul {
position: relative;
background: #f9f9f9;
display: flex;
width: 50%;
border-radius: 25px;
height: auto;
padding:0px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
ul li {
position: relative;
z-index: 10;
flex: 1;
text-align: center;
}
ul li a {
font-size:14px;
color: #666;
width: auto;
height:20px;
padding:15px;
display: block;
text-align: center;
transition: all .3s;
}
ul li a:hover{
text-shadow:0px 0px 15px #fff;
transition: all .3s;
}
.li_bg {
width: 17%;
height: auto;
display: inline-block;
background-color: #ffcc00;
box-shadow: 0 0px 15px 0 rgba(255, 204, 0, 0.58);
position: absolute;
left: 0;
top: 0px;
bottom: 0px;
margin: auto;
z-index: 2;
border-radius: 25px;
}
.this a{
font-weight: 700;
color: #333;
}
在css中定义的 .this 就是当li被点击时,给它增加的样式类名,通过修改 .this a 就可以实现点击后想要的效果。我这里就是给字体加粗,改变了字体颜色的深度。
接下来,我们让背景色块跟着鼠标动起来:
// 需求:鼠标经过哪个导航栏目,背景色滑动过去
var liList = document.getElementsByTagName('li');
var bg = document.getElementsByClassName('li_bg')[0];
var header = 0;
var liLeft = 0;
console.log(0);
// 添加事件
// 遍历li
for (var i = 0; i < liList.length; i++) {
liList[i].onmouseover = function () {
liLeft = this.offsetLeft + (this.offsetWidth - bg.offsetWidth) / 2;
}
}
// 使用定时器
setInterval(function () {
header = header + (liLeft - header) / 10;
bg.style.left = header + 'px';
}, 10)
写到这里,背景色块跟随鼠标滑动已经实现了。接下来我们来完善点击后给li增加this属性的的代码:
$(document).ready(function (){
$("li").each(function(index){
$(this).click(function(){
$("li").removeClass("this");
$("li").eq(index).addClass("this");
});
});
});
这段代码也很容易理解,当那个li项被点击,移除所有li的this类名,然后,给被点击的li增加this类名。
好了,这个例子的效果就完美实现了。需要《css+js实现导航栏色块跟随滑动+点击后增加样式》源码的同学,可以点击下载了。 感谢您阅读本篇,如果对您有所帮助,请收藏+点赞,谢谢!