注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

面包会有的

php asp 高端网站开发 微信网站开发 视频会议软硬件

 
 
 

日志

 
 

jquery 单击显示下拉菜单层 简单的示例  

2013-03-12 17:35:18|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

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>
<title>jQuery+CSS打造的弹出层菜单</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<style>
 body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{
  padding:0;margin:0;
 }
 li{
  list-style:none;
 }
 img{
  border:none;
 }
 em{
  font-style:normal;
 }
 a{
  color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();
 }
 a:hover{
  color:#000;text-decoration:underline;
 }
 body{
  font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;
 }
 .clear{
  height:0;overflow:hidden;clear:both;
 }
 .UpLayer{
  //margin:100px;
 }
 .UpLayer dl dt{ /* 主菜单 */
  width:auto;position:absolute; z-index:3;padding:0px;height:20px;line-height:20px;
 }

 .UpLayer dl dd{ /* 下拉菜单 */
  width:100px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;
 }
 .UpLayer dl dd a{
  display:block;border-bottom:#ccc 1px dashed;
 }


 .UpLayer02{
  border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;
 }
</style>


<script type="text/javascript">
$(document).ready(function(){
 var objStr = ".UpLayer";
 $(objStr).each(function(i){
  $(this).click(function(){
   $($(objStr+" dd")[i]).show();
   $($(objStr+" dt")[i]).addClass("UpLayer02");
  });
  $(this).hover(function(){},function(){
   $($(objStr+" dd")[i]).hide();
   $($(objStr+" dt")[i]).removeClass("UpLayer02");
  }); 
 });
});
</script>
</head>
<body>

<div style="clear:both;width:100%;height:20px;background-color:#B50F0F;line-height:20px;color:#FFFFFF;">
 首页 资讯 新闻 图片 论坛
</div>

<!-- 【经典】弹出层菜单 -->
<div class="UpLayer">
 <dl>
  <dt><a href="javascript:void(0)">单击此处,将显示弹出菜单层</a></dt>
  <dd>
   <a href="http://www.feizhuwang.com">农产品供求信息</a>
   <a href="#">热门文章</a>
   <a href="#">联系站长</a>
   <a href="#">时光勿勿</a>
  </dd>
 </dl> 
</div>

<br><br>
提示:如果网页有出错提示,请刷新页面再试。
<br />
<p></p>
</body>
</html>


  评论这张
 
阅读(593)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017