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

最新推荐文章于 2021-06-20 09:29:55 发布

lord_llz

最新推荐文章于 2021-06-20 09:29:55 发布

阅读量2.7k

点赞数

分类专栏： javascript 文章标签： css styles html function menu javascript

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

原来的二级菜单,三个文件，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">

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

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

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