兼容所有瀏覽器的橫向菜單導航

公司人少，所以有時候前臺就也做一點。最近一個網(wǎng)站需要做一個橫向菜單導航，以前也做過一些小例子想著沒啥，網(wǎng)站做完后直接上傳，第二天老板可說咋在我這顯示不對呀，我過去一看。

突然想起來，IE6沒試。我就回來開始調(diào)，也沒調(diào)好，網(wǎng)上也有很多，但是一直也沒找個合適的。最后還是google出來了一個外國的網(wǎng)頁，一看這個不錯。確實很好。我在網(wǎng)上也搜了不少例子，可是一改就亂，就是這個原因換了好些也沒見個合適的。記著，用時查看。。。。。

就這了。有空時，把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>