jQuery 下拉菜单，很流行的效果

2024-09-05 12:20:46

字体：大中小

来源：转载

供稿：网友

jQuery 下拉菜单，很流行的效果，美化的一般，其实根本就没有美化，想用的朋友拿去自己美化一下。这里主要向大家介绍一下用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=gb2312" /><title>jQuery下拉菜单</title><script type='text/javascript' src='/ajaxjs/jquery1.3.2.js'></script><style type="text/css">ul{ margin:0; padding:0;}ul li{ list-style:none}#div{ width:960px; height:28px;}#div ul li{ float:left; height:28px; display:inline; line-height:28px; padding:0px 20px; position:relative;}#div ul li ul{ position:absolute; z-index:99; display:none; top:28px; width:140px; left:0px;}#div ul li ul li{ display:block; width:140px; height:26px; line-height:26px; background-color:#666; border-bottom:1px #FFFFFF solid;}#div ul li a{ color:#000000; text-decoration:none;}</style><script type="text/javascript">  $(function(){  $("#div ul li").hover(function(){    $(this).css("background","#333333").children("ul").slideDown();  },function(){    $(this).css("background","#fff").children("ul").slideUp();  })  $("#div ul li ul li").hover(function(){     $(this).css("background","#333");	 },function(){	 $(this).css("background","#666");	 })  })</script></head><body><div id="div"> <ul>   <li>首页</li>   <li>企业资源     <ul>	   <li>企业资源</li>	   <li>企业资源</li>	 </ul>   </li>   <li>新闻中心         <ul>	   <li>新闻中心</li>	   <li>新闻中心</li>	   <li>新闻中心</li>	 </ul>   </li>   <li>工程业绩         <ul>	   <li>工程业绩</li>	   <li>工程业绩</li>	   <li>工程业绩</li>	 </ul>   </li>   <li>仪器设备            <ul>	   <li>仪器设备</li>	   <li>仪器设备</li>	 </ul>   </li>   <li>企业文化             <ul>	   <li>企业文化</li>	   <li>企业文化</li>	 </ul>   </li>   <li>联系我们             <ul>	   <li>联系我们</li>	   <li>联系我们</li>	   <li>联系我们</li>	 </ul>   </li> </ul></div></div></body></html>

上一篇：支付宝CSS下拉圆角导航菜单

下一篇：Js+css 精美二级导航

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注