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

面包会有的

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

 
 
 

日志

 
 

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

2013-03-12 18:47:03|  分类: 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;
 }

A:link {
 COLOR: #ffffff; TEXT-DECORATION: none
}
A:visited {
 COLOR: #6B0E06; TEXT-DECORATION: none
}
A:hover {
 COLOR: #FF0000; TEXT-DECORATION: none
}
A:active {
 COLOR: #bc2931
}


 li{
  list-style:none;
 }
 img{
  border:none;
 }
 em{
  font-style:normal;
 }

 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;
 }
 .menu{
  float:left;width:40px;height:20px;line-height:20px;margin-left:10px;z-index:0;display:block;
 }
 .menu dl dt{ /* 主菜单 */
  clear:both;width:auto;position:absolute; z-index:0;padding:0px;height:20px;line-height:20px;padding:0 5px 0 5px;
  
 }

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


 .menu02{
  border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;padding:0 5px 0 5px;
 }


 .nav{float:left;padding:0 5px 0 5px;}


 a:link.white12 {
  line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #ffffff; font-family: "宋体";TEXT-DECORATION: none;test:expression(target="_blank");
 }
 a:visited.white12 {
  line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
 }
 a:hover.white12 { 
  line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #FF0000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
 }
 a:active.white12 {
  line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
 }


 a:link.black12 {
  line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体";TEXT-DECORATION: none;test:expression(target="_blank");
 }
 a:visited.black12 {
  line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
 }
 a:hover.black12 { 
  line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #FF0000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
 }
 a:active.black12 {
  line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
 }

</style>


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

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

 
 <span class="menu">
  <dl>
   <dt><a href="javascript:void(0)" class="white12" >菜单1></a></dt>
   <dd>
    <a href="http://www.feizhuwang.com" class="black12" >农产品供求信息1</a>
    <a href="http://www.feizhuwang.com" class="black12" >热门文章1</a>
    <a href="http://www.feizhuwang.com" class="black12" >联系站长</a>
    <a href="http://www.feizhuwang.com" class="black12" >时光勿勿</a>
   </dd>
  </dl> 
 </span>

 <span class="menu">
  <dl>
   <dt><a href="javascript:void(0)" class="white12" >单击弹出菜单层2></a></dt>
   <dd>
    <a href="http://www.feizhuwang.com" class="black12" >农产品供求信息2</a>
    <a href="http://www.feizhuwang.com" class="black12" >热门文章2</a>
    <a href="http://www.feizhuwang.com" class="black12" >联系站长2</a>
    <a href="http://www.feizhuwang.com" class="black12" >时光勿勿2</a>
   </dd>
  </dl> 
 </span>


</div>

 

 

</body>
</html>


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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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