就下载 —— 安全下载、无毒手机软件、绿色软件官方下载网站最近更新|下载排行|热门标签|收藏本站

您现在的位置是:就下载 > IT资讯 > 软件教程 > 兼容所有浏览器的横向菜单导航

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

时间:2014-10-17 09:54:05 来源: 复制分享

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

突然想起来,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>

上一篇:如何利用7-Zip封装软件

本文地址:软件教程 >> http://www.9xz.net/it/ruanjianjiaocheng/20197.html

下一篇:附加SQL2005数据库 出现“Transact-SQL 语句或批处理时发生了异常”

  • 打印
推荐阅读
热门专题
推荐内容
热点内容