您的位置：首页 > Web前端 > JQuery

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

2015-03-11 00:00 1146 查看
本文实例讲述了jQuery实现带动画效果的二级下拉导航方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery二级下滑导菜单</title>

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

<script type="text/javascript" src="jquery.effects.core.min.js"></script>

<style type="text/css">

body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0; padding:10px;}

.nav_list{ list-style:none; margin:0; padding:0;}

.nav_list li{ float:left; text-align:center;  margin-right:10px; position:relative;}

.nav_list li a{ width:80px; text-align:center; padding:4px 0; text-decoration:none;color:#ccc; background:#996666; display:block; float:left;}

.nav_list li a.current{ width:80px; text-align:center; padding:4px 0; text-decoration:none;color:#fff; background:#f00; display:block; float:left;}

.nav_list li div.second{ color:#999999; height:0px; overflow:hidden; position:absolute; left:0; top:22px; width:80px;}

.nav_list li div.second a{ background:#666666; color:#fff;  border:none; width:80px; border-top:1px solid 

#FFFFFF; padding:5px 0;}

</style>

<script type="text/javascript">

$(function(){  

  Menu(".nav_list");

});

function Menu(ul_class_name){   

  Second(".nav_list");

  var li_name = ul_class_name+" "+"li";

  $("div.second").css("opacity","0.1");

  $(li_name).hover(

    function(){

      var a_height =  $(this).children("div.second a:first").css("height");

      var a_count = $(this).children("div.second").children("a").length;

      var slide_hieght =  (parseInt(a_height)+11)*a_count;

      $(this).children("div.second").stop().animate({height:slide_hieght+"px",opacity:"0.9"},600);   

      $(this).children("a:not(.current)").stop().animate({backgroundColor:"#f00",color:"#fff"},800);

    },function(){

      $(this).children("div.second").stop().animate({height:"0px",opacity:"0.1"},600);

      $(this).children("a:not(.current)").stop().animate({backgroundColor:"#996666",color:"#ccc"},800);

    });

}

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>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

    </div>

  <li>

  <li>

    <a href="#">Test_4</a>

    <div class="second">

      <a href="#">menu_4</a>

      <a href="#">menu_4</a>

      <a href="#">menu_4</a>

    </div>

  <li>

  <li>

    <a href="#">Test_5</a>

    <div class="second">

      <a href="#">menu_5</a>

      <a href="#">menu_5</a>

      <a href="#">menu_5</a>

    </div>

  <li>

</ul>

<div style="width:800px; clear:both; padding:10px;">

  <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航