jQuery 滑动菜单效果

最新推荐文章于 2024-06-21 04:17:52 发布

转载最新推荐文章于 2024-06-21 04:17:52 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zion0707/p/3889378.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用CSS和jQuery实现的动态导航栏效果。通过简单的HTML结构配合CSS样式及jQuery脚本，当鼠标悬停在不同的导航项上时，会有一个橙色线条动画跟随鼠标移动到对应的导航项下方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>

<head>

<title>Document</title>

</head>

<style>

padding:0;

margin:0;

}

ul,li{

list-style:none;

}

.nav{

height:30px;

background:rgba(224,0,0,.5) !important;

}

.nav li{

float:left;

padding:0px 20px;

line-height:30px;

height:30px;

cursor:pointer;

}

.nav li a{

color:#fff;

text-decoration:none;

display: block;

}

.nav li:hover{

background:red;

}

.box{

position:relative;

}

.active{

position:absolute;

height:5px;

background:orange;

}

</style>

<body>

</ul>

</div>

</body>

</html>

$(function(){

//获取第一个li的宽度

var firstLiWidth = $('.nav li').eq(0).outerWidth();

//定义动画菜单的宽度

$('.active').css('width', firstLiWidth+'px');

//鼠标进入时，active跟随，根据它的索引值来定位

$('.nav li').mouseover(function(){

// alert($(this).index());

$('.active').stop().animate({

left: $(this).index() * firstLiWidth +'px'

}, 400);

}).mouseout(function(){

//鼠标离开的时候，遍历所有li然后根据哪个有 hover这个class的时候那么鼠标就停留在那里

$('.nav li').each(function(){

if ($(this).hasClass('hover')) {

$('.active').stop().animate({

//根据它的索引值和第一个菜单宽度来定它的位置

left: $(this).index() * firstLiWidth +'px'

}, 400);

};

});

//鼠标点击的时候加上class让它进行active的定位

$('.nav li').click(function(){

$(this).addClass('hover').siblings().removeClass();

});

})

</script>

转载于:https://www.cnblogs.com/zion0707/p/3889378.html