兼容所有浏览器的横向菜单导航

前往谷歌浏览器专题 公司人少，所以有时候前台就也做一点。最近一个网站需要做一个横向菜单导航，以前也做过一些小例子想着没啥，网站做完后直接上传，第二天老板可说咋在我这显示不对呀，我过去一看。

突然想起来，IE6没试。我就回来开始调，也没调好，网上也有很多，但是一直也没找个合适的。最后还是google出来了一个外国的网页，一看这个不错。确实很好。我在网上也搜了不少例子，可是一改就乱，就是这个原因换了好些也没见个合适的。记着，用时查看。。。。。

就这了。有空时，把css给注释下。方便改写。

对了，老外的博客地址：http://javascript-array.com/scripts/simple_drop_down_menu/

HTML:

01 <ul id="sddm">

02 <!--如果栏目下没有子菜单就不用onmouseover="mopen('m1')" onmouseout="mclosetime()"以及下面的那个DIV -->

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 <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>