jquery下拉菜单资源-CSDN文库

共5个文件

gif：2个

jpg：1个

js：1个

jquery

下拉菜单

需积分: 3 136 浏览量 2008-06-20 09:36:48 上传评论 1 收藏 17KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

dropMenu.rar （5个子文件）

bgmenu.jpg 2KB

blockdefault.gif 70B

blockactive.gif 70B

As.publc.js 27KB

a.html 5KB

<!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" /> <script type="text/javascript" src="js/As.publc.js"> </script> <title>无标题文档</title> <style> /* CSS Document */ body{ width:778px; margin:auto; font-size:12px; font-family:Tahoma,Arial, Helvetica, sans-serif; } /*全局导航菜单定义*/ #nav{ background:url(bgmenu.jpg) top repeat-x; height:30px; margin: 0; } #nav ul{ margin: 0; padding: 0; text-align:center; float: left; font: bold 13px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: black url(blockdefault.gif) center center repeat-x; } #nav li{ display: inline; } #nav li a{ position:relative; float: left;width:100px; color: white; padding: 9px 11px; text-decoration: none; border-right: 1px solid white; } #nav li a:visited{ color: white; } #nav li a:hover{ background: black url(blockactive.gif) center center repeat-x; } .showmenu_shadow{ background:#e9e8e8; width:160px; position:absolute; z-index:99; display:none; text-align:left; right:0px; filter: alpha(opacity=86); -moz-opacity: .86; } .showmenu_shadow a, .showmenu_shadow a:link, .showmenu_shadow a:visited{ display:block; padding:2px 0 0 5px; color:#289312; font-weight:bold; border-bottom:1px solid #addc61; height:22px; text-decoration:none; } .showmenu_shadow a:hover{ color:#cc0000; background:#FFFFFF; border-bottom:1px solid #999999; } .showmenu_shadow .showmenuBody{/*内容层*/ z-index:100; border:solid 1px #999; position:relative; background:#dff6b3; margin:0 2px 2px 0; } </style> <script> //============================== //下拉菜单用(jquery) //www.mxisky.com // //============================== function posXY(obj){ //no use var hk_left=obj.offsetLeft var hk_top=obj.offsetTop var vParent = obj.offsetParent; while (vParent.tagName.toUpperCase() != "BODY") { hk_left += vParent.offsetLeft; hk_top += vParent.offsetTop; vParent = vParent.offsetParent; } this.PX=hk_left; this.PY=hk_top; // alert(hk_left); // alert(hk_top); } var showmua=false; //var l; function showmenu(a,b){ //强制hide() for(i=1;i<=4;i++){ var el=$('#mc'+i); hid(el) } showmua=true; var e=$('#'+a); if (e.css("display")=="none"){e.fadeIn('normal')}; if(b){//默认不传入b参数 var mc_left = document.getElementById(b).offsetLeft; e.css("left",mc_left); } } function hidemenu(a){ showmua=false setTimeout('hid("'+a+'")',1) //hid(a) } function hid(a){ var e=$('#'+a) if (e.css("display")=="block" && showmua==false){e.fadeOut('normal')} showmua=true; } </script> </head> <body> <div id="nav"> <ul> <li><a href="{$SiteRoot}">home</a></li> <li><a href="{$SiteRoot}products" id="mh1" onmouseover="showmenu('mc1','mh1')" onmouseout="hidemenu('mc1')">Products</a></li> <li><a href="javascript:void(0)" id="mh2" onmouseover="showmenu('mc2','mh2')" onmouseout="hidemenu('mc2')">Services</a></li> <li><a href="javascript:void(0)" id="mh3" onmouseover="showmenu('mc3','mh3')" onmouseout="hidemenu('mc3')" >About us</a></li> <li><a href="javascript:void(0)" id="mh4" onmouseover="showmenu('mc4','mh4')" onmouseout="hidemenu('mc4')">Contact us</a></li> <li><a href="{$SiteRoot}news">News</a></li> </ul> </div> <div class="showmenu_shadow" id="mc1" onmouseover="showmenu('mc1')" onmouseout="hidemenu('mc1')"> <div class="showmenuBody"> <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=2">PVC Series </a> <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=7">Hollow PP Sheet </a> <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=6">Acrylic Sheet</a> <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=10">Ceramic Tiles</a> <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=11">Artificial Flower</a> <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=12">Whole Set Equipment</a> </div> </div> <div class="showmenu_shadow" id="mc2" onmouseover="showmenu('mc2')" onmouseout="hidemenu('mc2')"> <div class="showmenuBody"> <a href="{$SiteRoot}Company/index.asp?part=member">Member Centre</a> <a href="javascript:void(0)">Leave Word</a> <a href="javascript:void(0)">Order inquiry</a> </div> </div> <div class="showmenu_shadow" id="mc3" onmouseover="showmenu('mc3')" onmouseout="hidemenu('mc3')"> <div class="showmenuBody"> <a href="{$SiteRoot}Company/index.asp?part=about">Introduction</a> <a href="{$SiteRoot}Company/index.asp?part=history">Review The History</a> <a href="{$SiteRoot}Company/index.asp?part=cert">Authorized Certificate</a> <a href="{$SiteRoot}Company/index.asp?part=honor">Honor & Glory</a> <a href="{$SiteRoot}Company/index.asp?part=news">News and Events</a> </div> </div> <div class="showmenu_shadow" id="mc4" onmouseover="showmenu('mc4')" onmouseout="hidemenu('mc4')"> <div class="showmenuBody"> <a href="{$SiteRoot}Company/index.asp?part=sendemail">Send E-mail</a> <a href="{$SiteRoot}Company/index.asp?part=department">Sales Department</a> </div> </div> </body> </html>

评论收藏

内容反馈