jQuery 滑动菜单效果

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

 

 

<div class="box">

 

      <ul class="nav">

 

      <li class="hover"><a href="#">菜单1</a></li>

      <li><a href="#">菜单2</a></li>

      <li><a href="#">菜单3</a></li>

      <li><a href="#">菜单4</a></li>

      <li><a href="#">菜单5</a></li>

      <li><a href="#">菜单6</a></li>

      <li><a href="#">菜单7</a></li>

      <li><a href="#">菜单8</a></li>

      <li><a href="#">菜单9</a></li>

 

      </ul><!--nav-->

 

 <div class="active"></div>

 

</div><!--box-->

 

 

</body>

 

</html>

 

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script>

 $(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>

 

jQuery 滑动菜单效果,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。