[转载]关于横向菜单导航。兼容IE6,7,8,Firefox,Chrome

[转载]关于横向菜单导航。兼容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">
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 #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}
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏