[转载]关于横向菜单导航。兼容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 } |