导航栏二级下拉菜单的js特效
博客专区 > lotozhou 的博客 > 博客详情
导航栏二级下拉菜单的js特效
lotozhou 发表于2年前
导航栏二级下拉菜单的js特效
  • 发表于 2年前
  • 阅读 590
  • 收藏 2
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

很多大型的网站的导航菜单栏会有二级菜单,那么刚开始的时候这些二级菜单是隐藏的,我们通过鼠标点击或者把鼠标放在上面就会让二级菜单显示,有些二级菜单会有一些动画效果,我们今天讲的是二级菜单从上面慢慢下滑并出来,以一个很平滑的方式出场,相比传统的直接出现更有交互性。

今天这里我主要说的是一个js特效,通过鼠标放在上面,让导航栏改变颜色,并且让二级菜单从上面缓慢平滑的出现,有一个效果,这个效果的实现其实也很简单,就是让二级菜单初始状态为全透明,我们通过js改变它的透明度和位置,从而让它实现,从无到有,从上面平滑出来的效果。

附上js代码:

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$("#Menu ul li").hover(function(){

var _this=$(this)

t=setTimeout(function(){

_this.addClass("active");//添加class=active

_this.find(".nav").animate({opacity:1,"top":"50px"},500);

},300);

//鼠标滑上去时

},function(){

clearTimeout(t);

//鼠标移开时

$(this).removeClass("active");

$(this).find(".nav").animate({opacity:0,"top":"0px"},500);

});

</script>


共有 人打赏支持
粉丝 8
博文 51
码字总数 51524
×
lotozhou
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: