jquery实现漂亮下拉菜单效果

稿源：互联网 2022-04-02 21:42:25 点击： 20354 撤稿纠错

漂亮实用下拉菜单特效，点击后带缓冲效果显示。

以下讨论的是和jquery 下拉菜单相关的jquery实现漂亮下拉菜单效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 漂亮实用的select下拉菜单 站长特效网</title>
<style type="text/css">
body{font-size:12px;}
.select{width:150px;height:24px;line-height:24px;position:relative;text-align:center;cursor:pointer;background:url(/img/1_20100909zzjs.jpg) right 0px no-repeat;color:#fff;}
.option{line-height:24px;width:150px;position:absolute;top:24px;left:0px;display:none;background:#820014;}
ul{list-style:none;margin:0;padding:0;}
ul li{height:24px;background:#666px;text-align:center;}
</style>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  var selects=$("#select");
  var options=$("#option");
  var state=true;
  selects.click(function(){
   if(state){
   if(!($(this).is(":animated"))){
    options.slideDown();
   }else{
    options.css("display","none");
  }
   state=false;
   }else{
   if(!($(this).is(":animated"))){
   options.slideUp();
   }else{
    $(this).stop(true,true);
    options.css("display","");
   }
   state=true;
   }
  });
 selects.hover(function(){
    $(this).css("background","url(/img/2_20100909zzjs.jpg) right 0px no-repeat");
    },
    function(){
    $(this).css("background","url(/img/1_20100909zzjs.jpg) right 0px no-repeat");
    });
  $("li").hover(function(){
   $(this).css("background","#990000").css("color","#ff9900");
  },
  function(){
   $(this).css("background","#820014").css("color","#fff");
  });
  $("li").click(function(){
   $(this).css("background","#c00").css("color","#ffffff");
   options.css("display","none");
   selects.children("span").text($(this).attr("tip"));
   $(".valt").val($(this).attr("tip"));
   state=false;
  });
  options.click(function(){
   selects.click(function(){return false;});
  });
 })
//欢迎来到 站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
需要加载js文件，请刷新页面看效果。<br />
您的选择是：<input type="text" class="valt" value="">
<div class="select" id="select"><span>请选择分类</span>
 <div class="option" id="option">
  <ul>
   <li tip="站长特效网一号">站长特效网一号</li>
   <li tip="站长特效网二号">站长特效网二号</li>
   <li tip="站长特效网三号">站长特效网三号</li>
   <li tip="站长特效网四号">站长特效网四号</li>
   <li tip="站长特效网五号">站长特效网五号</li>
   <li tip="站长特效网六号">站长特效网六号</li>
   <li tip="站长特效网七号">站长特效网七号</li>
   <li tip="站长特效网八号">站长特效网八号</li>
   <li tip="站长特效网九号">站长特效网九号</li>
   <li tip="站长特效网十号">站长特效网十号</li>
   <li tip="站长特效网十一号">站长特效网十一号</li>
   <li tip="站长特效网十二号">站长特效网十二号</li>
   <li tip="站长特效网十三号">站长特效网十三号</li>
  </ul>
 </div>
</div>
</body>
</html>

关于jquery实现漂亮下拉菜单效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010092664971.shtml方便下次再访问哦。

·上一篇： 选中多选框文字颜色改变效果
·下一篇： 文本框内容禁止复制粘贴效果

jquery实现漂亮下拉菜单效果

文章分类LIST >>返回首页

最新游戏

最新新闻