Mikel
[转载]关于横向菜单导航。兼容IE6,7,8,Firefox,Chrome。 – nyth – 博客园.
公司人少，所以有时候前台就也做一点。最近一个网站需要做一个横向菜单导航，以前也做过一些小例子想着没啥，网站做完后直接上传，第二天老板可说咋在我这显示不对呀，我过去一看。
突然想起来，IE6没试。我就回来开始调，也没调好，网上也有很多，但是一直也没找个合适的。最后还是google出来了一个外国的网页，一看这个不错。确实很好（它的主要特点是那个JS）。我在网上也搜了不少例子，可是一改就乱，就是这个原因换了好些也没见个合适的。记着，用时查看。。。。。
就这了。有空时，把css给注释下。方便改写。（在调css样式做自己样式的时候，用firbug改着调着很方便）
对了，老外的博客地址：http://javascript-array.com/scripts/simple_drop_down_menu/
HTML:
01 |
<ul id="sddm"> |
03 |
<li><a href="#" onmouSEOver="mopen('m1')" onmouseout="mclosetime()">Home</a> |
04 |
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> |
05 |
<a href="#">HTML DropDown</a> <a href="#">DHTML DropDown menu</a> <a href="#">JavaScript |
06 |
DropDown</a> <a href="#">DropDown Menu</a> <a href="#">CSS DropDown</a> |
07 |
</div> |
08 |
</li> |
09 |
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a> |
10 |
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> |
11 |
<a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX dropdown</a> |
12 |
<a href="#">DIV dropdown</a> |
13 |
</div> |
14 |
</li> |
15 |
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a> |
16 |
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> |
17 |
<a href="#">Visa Credit Card</a> <a href="#">Paypal</a> |
18 |
</div> |
19 |
</li> |
20 |
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a> |
21 |
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> |
22 |
<a href="#">Download Help File</a> <a href="#">Read online</a> |
23 |
</div> |
24 |
</li> |
25 |
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a> |
26 |
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> |
27 |
<a href="#">E-mail</a> <a href="#">Submit Request Form</a> <a href="#">Call Center</a> |
28 |
</div> |
29 |
</li> |
30 |
</ul> |
31 |
<div style="clear: both"> |
32 |
</div> |
33 |
<div style="clear: both"> |
34 |
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
35 |
</div> |
JS:(主要就是这个把不变的东西用js来固定住，其余的都可以自定义)
01 |
<script type="text/JavaScript"> |
02 |
<!-- |
03 |
var timeout = 500; |
04 |
var closetimer = 0; |
05 |
var ddmenuitem = 0; |
06 |
07 |
// open hidden layer |
08 |
function mopen(id) |
09 |
{ |
10 |
// cancel close timer |
11 |
mcancelclosetime(); |
12 |
13 |
// close old layer |
14 |
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; |
15 |
16 |
// get new layer and show it |
17 |
ddmenuitem = document.getElementById(id); |
18 |
ddmenuitem.style.visibility = 'visible'; |
19 |
20 |
} |
21 |
// close showed layer |
22 |
function mclose() |
23 |
{ |
24 |
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; |
25 |
} |
26 |
27 |
// go close timer |
28 |
function mclosetime() |
29 |
{ |
30 |
closetimer = window.setTimeout(mclose, timeout); |
31 |
} |
32 |
33 |
// cancel close timer |
34 |
function mcancelclosetime() |
35 |
{ |
36 |
if(closetimer) |
37 |
{ |
38 |
window.clearTimeout(closetimer); |
39 |
closetimer = null; |
40 |
} |
41 |
} |
42 |
43 |
// close layer when click-out |
44 |
document.onclick = mclose; |
45 |
// --> |
46 |
</script> |
CSS:
01 |
#sddm |
02 |
{ margin: 0; |
03 |
padding: 0; |
04 |
z-index: 30} |
05 |
06 |
#sddm li |
07 |
{ margin: 0; |
08 |
padding: 0; |
09 |
list-style: none; |
10 |
float: left; |
11 |
font: bold 11px arial} |
12 |
13 |
#sddm li a |
14 |
{ display: block; |
15 |
margin: 0 1px 0 0; |
16 |
padding: 4px 10px; |
17 |
width: 60px; |
18 |
background: #5970B2; |
19 |
color: #FFF; |
20 |
text-align: center; |
21 |
text-decoration: none} |
22 |
23 |
#sddm li a:hover |
24 |
{ background: #49A3FF} |
25 |
26 |
#sddm div |
27 |
{ position: absolute; |
28 |
visibility: hidden; |
29 |
margin: 0; |
30 |
padding: 0; |
31 |
background: #EAEBD8; |
32 |
border: 1px solid #5970B2} |
33 |
34 |
#sddm div a |
35 |
{ position: relative; |
36 |
display: block; |
37 |
margin: 0; |
38 |
padding: 5px 10px; |
39 |
width: auto; |
40 |
white-space: nowrap; |
41 |
text-align: left; |
42 |
text-decoration: none; |
43 |
background: #EAEBD8; |
44 |
color: #2875DE; |
45 |
font: 11px arial} |
46 |
47 |
#sddm div a:hover |
48 |
{ background: #49A3FF; |
49 |
color: #FFF} |
