JS特效：经典的下拉菜单

  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2<html xmlns="http://www.w3.org/1999/xhtml">
  3<head>
  4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5<title>Alone's blog--导航</title>
  6<style>
  7
  8a:link,a:visited{color:#2f5795;text-decoration:none;}
  9a:hover,a:active{color:#000;}
 10*{ margin:0; padding:0;}
 11li{list-style:none;vertical-align:middle;}
 12ol li{list-style:inside decimal; padding-left:6px;}
 13img{ border:0;}
 14.FL{float:left;}
 15.FR{float: right;}
 16.Hide{border-top:1px solid transparent !important;margin-top:-1px !important;border-top:0;margin-top:0;clear:both;visibility:hidden;}
 17
 18body{font:12px/21px "宋体";color:#000;text-align:center;}
 19.Wp {text-align:left; margin:0 auto;width:880px;}
 20#Head{height:35px; background:#323334 url(img/navbg1.jpg) repeat-x; width:100%;background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;}
 21
 22#Head .Wp{height:32px;}
 23 #Head h1{ float:left;}
 24 #nav{ float:right;border-left: 1px solid #818488;border-right: 1px solid #323334;}
 25  #nav li{ float:left;}
 26  #nav li a{width:78px; height:32px;border-right:1px solid #818488;border-left:1px solid #323334; display:block; font: bold 14px/32px "宋体";text-align:center;}
 27  #nav a:link,#nav a:visited{color:#fff;text-decoration:none}
 28  #nav a:hover,#nav a:active,#hover{color:#fff;font: bold 16px/32px "宋体"; background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;}
 29  
 30   #downall{position:absolute;top:33px;margin:0;padding:0;}
 31   #product{position:absolute;top:33px;margin:0;padding:0;}
 32   #product1{position:absolute;top:33px;margin:0;padding:0;}
 33   #product2{position:absolute;top:33px;margin:0;padding:0;}
 34   #product3{position:absolute;top:33px;margin:0;padding:0;}
 35   #downall li,#product li,#product1 li,#product3 li,#product2 li{ float:none}
 36   #downall li a,#product li a,#product1 li a,#product3 li a,#product2 li a{ width:130px; height:24px;border-bottom:1px dotted #818488; display:block; font:12px/24px "微软雅黑", "宋体";color:#fff; }
 37    #downall a:link,#downall a:visited,#product a:link,#product a:visited,#product1 a:link,#product1 a:visited,#product2 a:link,#product2 a:visited,#product3 a:link,#product3 a:visited{text-decoration:none;background:#3f4249}
 38    #downall a:hover,#downall a:active,#product a:hover,#product a:active,#product1 a:hover,#product1 a:active,#product2 a:hover,#product2 a:active,#product3 a:hover,#product3 a:active{font: bold 12px/24px "微软雅黑","宋体"; background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;}
 39</style>
 40<script language="javascript">
 41// JavaScript Document
 42function $(s) {
 43  return document.getElementById(s)?document.getElementById(s):s;
 44}
 45function findPosX(obj)
 46{
 47  var curleft = 0;
 48  if (obj.offsetParent)
 49  {
 50    while (obj.offsetParent)
 51    {
 52      curleft += obj.offsetLeft
 53      obj = obj.offsetParent;
 54    }
 55  }
 56  else if (obj.x)
 57    curleft += obj.x;
 58  return curleft;
 59}
 60function findPosY(obj)
 61{
 62  var curtop = 0;
 63  if (obj.offsetParent)
 64  {
 65    while (obj.offsetParent)
 66    {
 67      curtop += obj.offsetTop
 68      obj = obj.offsetParent;
 69    }
 70  }
 71  else if (obj.y)
 72    curtop += obj.y;
 73  return curtop;
 74}
 75var currPcnNav=null;
 76function pcnNav(o){
 77 var offLeft = findPosX(o);
 78 var offTop = findPosY(o);
 79 var arrNav=document.getElementById("subNav").getElementsByTagName("ul");
 80 if (currPcnNav!=null) {
 81    hidPcnNav(currPcnNav);
 82 }
 83 if (o.getAttribute("urn")!="null") {
 84  shwPcnNav($(o.getAttribute("urn")),offLeft);
 85  currPcnNav=$(o.getAttribute("urn"));
 86  document.body.onmouseup=function(){
 87   hidPcnNav(currPcnNav);
 88  }
 89 } else {
 90      currPcnNav?hidPcnNav(currPcnNav):"";
 91 }
 92}
 93function shwPcnNav(o,n){
 94 o.style.display="";
 95 o.style.left=n+"px";
 96}
 97function hidPcnNav(o){
 98 o.style.display="none";
 99 document.body.onmouseup=null;
100}
101function pcnNavInit(){
102 var arrNav=document.getElementById("nav").getElementsByTagName("a");
103 for (var i=0;i<arrNav.length;i++ ) {
104  arrNav[i].onmouseover=function(){
105  pcnNav(this);
106  }
107 }
108}
109window.onload=pcnNavInit;
110</script>
111</head>
112</head>
113<body>
114<div id="Head">
115 <div class="Wp">
116  <ul id="nav">
117   <li id="hover"><a urn="null" href="#">Alone</a></li>
118   <li><a urn="downall" href="#">Alone</a></li>
119   <li><a urn="product" href="#">Alone</a></li>
120   <li><a urn="product1" href="#">Alone</a></li>         
121   <li><a urn="product2" href="#">Alone</a></li>
122   <li><a urn="product3" href="#">Alone</a></li>
123   <li><a urn="null" href="#">Alone</a></li>
124  </ul>
125 </div>
126</div>
127 <div id="subNav">
128  <ul id='downall' style="display:none;">
129   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
130   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
131   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
132  </ul>
133  <ul id='product' style="display:none;">
134   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
135   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
136   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
137            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
138  </ul>
139        <ul id='product1' style="display:none">
140   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
141   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
142   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
143            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
144            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
145  </ul>
146         <ul id='product2' style="display:none">
147   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
148   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
149   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
150            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
151            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
152            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
153  </ul>
154         <ul id='product3' style="display:none">
155   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
156   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
157   <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
158            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
159            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
160            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
161            <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li>
162  </ul>
163 </div>
164    <div style="margin-top:50px"><h4>转载请著名作者:Alone</h4></div>
165    </body>
166</html> 
167
posted @ 2009-08-11 13:59  聖光小草  阅读(297)  评论(0)    收藏  举报