经典css菜单,无限级朝右弹,代码短之极致了

本来在经典论坛下的朝右弹的二级菜单,代码极短。
我改了一天,改成了无限级的。

原来的二级菜单,三个文件,caidan.htm,style2.css,drop_down.js

caidan.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0058)http://www.alistapart.com/d/horizdropdowns/horizontal2.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Horizontal Drop Down Menus</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT src="drop_down.js" type=text/javascript></SCRIPT>

<STYLE type=text/css>@import url( style2.css );
</STYLE>

<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY>
<UL id=nav>
  <LI><A
  href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Home</A>
  <LI><A
  href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">About</A>
  <UL>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">History</A>

    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Team</A>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Offices</A>
    </LI></UL>
  <LI><A
  href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Services</A>

  <UL>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Web
    Design</A>

<UL>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Web
    Design->sub</A>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Web
    Design->sub2</A>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Web
    Design->sub3</A>

</UL>

    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Internet
    Marketing</A>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Hosting</A>

    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Domain
    Names</A>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Broadband</A>
    </LI></UL>
  <LI><A
  href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Contact
  Us</A>
  <UL>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">United
    Kingdom</A>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">France</A>

    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">USA</A>
    <LI><A
    href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Australia</A>
    </LI></UL></LI></UL></BODY></HTML>

style2.css

body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac /*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

drop_down.js

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.οnmοuseοver=function() {
this.className+=" over";
  }
  node.οnmοuseοut=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.οnlοad=startList;
我修改后的无限级弹出菜单,调试版,ie6没有bug。

left.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0058) -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Horizontal Drop Down Menus</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT src="left/drop_down.js" type=text/javascript></SCRIPT>

<STYLE type="text/css">@import url( left/style2.css );
</STYLE>

<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY>
<UL id=nav>
  <LI><A  href="#">Home</A>
  <LI><A   href="#">About</A>
  <UL>
    <LI><A    href="#">History</A>

    <LI><A     href="#">Team</A>
    <LI><A     href="#">Offices</A></LI>
 </UL>
  <LI><A   href="#">Services</A>

  <UL>
    <LI><A     href="#">Web Design</A>

<UL>
    <LI><A  href="#">Web Design->sub</A>
    <LI><A     href="#">Web     Design->sub2</A>
    <LI><A     href="#">Web     Design->sub3</A>
<UL>
<LI><A  href="#">Web Design->3</A>
<LI><A     href="#">Web     Design->3</A>
<LI><A     href="#">Web     Design->3</A>

</LI>

</UL>
</LI>

</UL>

    <LI><A     href="#">Internet     Marketing</A>
    <LI><A     href="#">Hosting</A>

    <LI><A     href="#">Domain     Names</A>
    <LI><A     href="#">Broadband</A>
    </LI></UL>
  <LI><A   href="#">Contact   Us</A>
  <UL>
    <LI><A     href="#">United     Kingdom</A>
    <LI><A     href="#">France</A>

    <LI><A     href="#">USA</A>
    <LI><A     href="#">Australia</A>
    </LI></UL></LI></UL>


<TEXTAREA NAME="info" id="info" ROWS="15" COLS="80"></TEXTAREA>
<PRE id="evalinfo"></PRE>

</BODY></HTML>

drop_down.js

// JavaScript Document
tag = 0;
startList = function(rootObj) {
var navRoot,i=0;
if(rootObj == '' || rootObj == null)rootObj=nav;
try{
navRoot = rootObj;
if(navRoot==null){alert('null a wrong accoured');}
else
{
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.οnmοuseοver=function()
{
this.className ="over";
info.value =this.innerHTML + ' /n';
evalinfo.innerHTML = this.innerHTML;
}
node.οnmοuseοut=function()
{
this.className="out";
info.value = this.innerHTML +' /n';
evalinfo.innerHTML = this.innerHTML;
        }
if(tag==1){
node.className = "out";
}
//info.value +='node['+i+']'+ node.nodeName +'/n';
startList(node);
}
else if (node.nodeName=="UL")
{  
tag =1;
startList(node);
}
}//for end
}
}//try end
catch(e){
alert("error by catch throw");
}//catch end
}//</startList>
window.onload = startList;

style2.css a little modify

BODY {
FONT: 11px verdana
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; LIST-STYLE-TYPE: none
}
UL LI {
POSITION: relative
}
LI UL {
DISPLAY: none; LEFT: 149px; POSITION: absolute; TOP: 0px
}

li ul li ul{
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

UL LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #777; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 0px solid; TEXT-DECORATION: none
}
 HTML UL LI {
FLOAT: left; HEIGHT: 1%
}
 HTML UL LI A {
HEIGHT: 1%
}
UL LI A:hover {
BACKGROUND: #f9f9f9; COLOR: #e2144a
}
LI UL LI A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
LI:hover UL {
DISPLAY: block
}

LI.over UL {
DISPLAY: block
}
LI.out UL{
DISPLAY:none
}
来自:http://community.csdn.net/Expert/topic/4123/4123998.xml?temp=.908169

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值