jQuery实现带动画效果的二级下拉导航方法

2020-05-24 21:37:52易采站长站整理

    });
}
function Second(ul_class_name){
  var second_menu = ul_class_name+” “+”li”+” “+”div.second”+” “+”>”+” “+”a”;
  $(second_menu).hover(
   function(){
      $(this).stop().animate({backgroundColor:”#000″,opacity:”1″},400);
    },function(){
      $(this).stop().animate({backgroundColor:”#666″,opacity:”0.9″},400);
    });
}
</script>
</head>
<body>
<ul class=”nav_list”>
  <li>
    <a href=”#” class=”current”>Test_1</a>
    <div class=”second”>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_2</a>
    <div class=”second”>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_3</a>
    <div class=”second”>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>