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
8
a: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}
109
window.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
<!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
8
a:link,a:visited{color:#2f5795;text-decoration:none;}
a:link,a:visited9
a:hover,a:active{color:#000;}10
*{ margin:0; padding:0;}11
li{list-style:none;vertical-align:middle;}12
ol li{list-style:inside decimal; padding-left:6px;}13
img{ 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
18
body{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 Document42
function $(s) {43
return document.getElementById(s)?document.getElementById(s):s;44
}45
function findPosX(obj)46
{47
var curleft = 0;48
if (obj.offsetParent)49
{50
while (obj.offsetParent)51
{52
curleft += obj.offsetLeft53
obj = obj.offsetParent;54
}55
}56
else if (obj.x)57
curleft += obj.x;58
return curleft;59
}60
function findPosY(obj)61
{62
var curtop = 0;63
if (obj.offsetParent)64
{65
while (obj.offsetParent)66
{67
curtop += obj.offsetTop68
obj = obj.offsetParent;69
}70
}71
else if (obj.y)72
curtop += obj.y;73
return curtop;74
}75
var currPcnNav=null;76
function 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
}93
function shwPcnNav(o,n){94
o.style.display="";95
o.style.left=n+"px";96
}97
function hidPcnNav(o){98
o.style.display="none";99
document.body.onmouseup=null;100
}101
function 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
}109
window.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
