无限级右边弹出菜单，代码极短，简洁极致（css,js）

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

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

</STYLE>

<BODY>

<LI><A href="#">About</A>

<UL>

<LI><A href="#">History</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>

</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="#">Australia</A>

</LI></UL></LI></UL>

</BODY></HTML>

// JavaScript Document

//tag本标记用于初始化所有子菜单的状态，使其隐藏。

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.onmouseover=function()

{

this.className ="over";

}

node.onmouseout=function()

{

this.className="out";

}

if(tag==1){

node.className = "out";

}

//递归给li赋予鼠标动作

startList(node);

}

else if (node.nodeName=="UL")

{ //标记为1，说明到了二级菜单以后，所以要给所有的赋隐藏属性。

tag =1;

startList(node);

}

}//for end

}

}//try end

catch(e){

alert("error by catch throw");

}//catch end

}//</startList>

window.onload = startList;

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

}

修改版，修改后，css独立，不再与全局css冲突，增加有子类别的箭头。然而速度好像不太快。js代码多了一点点。

<!--

// JavaScript Document

startList = function(rootObj) {

var navRoot,i=0; //var 声明则变量就为局部变量了，彼此不影响，递归就没问题了。

if(rootObj == '' || rootObj == null)rootObj=navitree;

try{

navRoot = rootObj;

if(navRoot==null){alert('TREE null a wrong accoured');}

else

{

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

if(node.childNodes.length>2){

//决定给LI套上哪个样式开始，子节点大于2个，说明有子菜单，子节点为A 、#text、UL

outclass="outbg";

node.onmouseover=function()

{

this.className = "overbg";

alert

//info.value = this.className;

}

node.onmouseout=function()

{

this.className= "outbg";

//info.value = this.className;

}

else{ //子节点数小于等于2个，说明无子菜单，子节点为：A 、#text.

outclass = "out"

node.onmouseover=function()

{

this.className = "over";

}

node.onmouseout=function()

{

this.className= outclass;

}

}//决定给LI套上哪个样式结束.如果有子菜单UL，则选择有箭头的样式，否则，选择无箭头的样式。

node.className = outclass;

}//判断节点是否为LI结束

//递归给li赋予鼠标动作

startList(node);

}//for end

}

}//try end

catch(e){

alert("error by catch throw");

}//catch end

}//</startList>

window.onload = startList;

//-->

</SCRIPT>

<style>

BODY { FONT: 11px verdana }

pre { FONT: 12px verdana }

/*这是定义id 为navitree的ul样式*/

UL#navitree{

PADDING : 0px; MARGIN: 0px; WIDTH: 150px;

BORDER-left:1px solid #008;BORDER-top:1px solid #008;BORDER-right:1px solid #008;

list-style:disc inside ;

}

/*这一句绝不能少,这是定义id 为navitree下的所有ul，包括ul的ul*/

UL#navitree UL{

BORDER-left:1px solid #008;BORDER-top:1px solid #008;BORDER-right:1px solid #008;

PADDING : 0px; MARGIN: 0px; WIDTH: 150px;

}

/*定义id 为 navitree 的 UL 下的所有LI*/

UL#navitree LI {

width:150px; padding:0px;MARGIN: 0px; POSITION: relative;

BORDER-bottom:1px solid #008;

}

/*初始化 id 为 navitree 的 UL 下的所有LI css样式为outbg时 */

UL#navitree LI.outbg UL{ DISPLAY:none; }

.navitree {font:11px verdana}

/*下面这一句异常关键,不可少*/

.navitree LI UL {

DISPLAY: none; LEFT: 150px; POSITION: absolute; TOP: 0px;

}

/*定义a link的样式*/

UL#navitree LI A { PADDING: 3px; DISPLAY: block; COLOR: #777; TEXT-DECORATION: none; }

UL#navitree LI A:hover { COLOR: white }

/*如果将下面这段去掉，LI的高度将会增加*/

HTML UL#navitree LI { FLOAT: left; HEIGHT: 1% }

HTML UL#navitree LI A { HEIGHT: 1% }

/*定义有子菜单的LI鼠标移过，移出的样式*/

LI.overbg {

background:url(D://usr//www//html//mambog/modules/navicategory/arr.gif) #000080 no-repeat top right;

color:white;

}

LI.outbg {background:url(D://usr//www//html//mambog/modules/navicategory/arr.gif) white no-repeat top right;

color:white;

}

LI.overbg UL{ DISPLAY: block;}

LI.outbg UL{DISPLAY:none;}

/*定义无子菜单的LI鼠标移过，移出的样式*/

LI.over {background:#000080;}

LI.out {background:white;}

</style>

<PRE>

我改了下，这个带图片箭头。图片箭头在css里定义，统一放到一个文件里了。

bug都补上了，样式也作了小小的修改。由于我对css的了解比较浅薄，只能尽力改到简洁了。

需要注意，如果你把三个文件分开来，那么，确保所有文件编码格式统一。如：都为gb2312，或都为utf-8

注意：由于原先的菜单样式定义不符合局部使用的要求，会影响整个页面的样式定义，所以我修改了。

修改后的样式符合局部使用的需要。其定义不会影响整个页面的样式定义。

整个UL容器需要像这样定义：

<UL id="<font color=red>navitree</font>" class="navitree">

此处的id号<font color=red>navitree</font>需要和javascript中的id号对应

在这里

if(rootObj == '' || rootObj == null)rootObj= <font color=red>navitree</font>;

</PRE>

<UL><LI><a href=#>Latest</a>

<UL><LI><a href=#>好5级</a></UL></UL></UL></UL><LI><a href=#>hello</a><LI><a href=#>二手交易</a><LI><a href=#>生活小常识</a><LI><a href=#>通信/互联网</a><LI><a href=#>干洗</a><LI><a href=#>家政</a><LI><a href=#>美容/美发</a><LI><a href=#>运动</a><LI><a href=#>健康</a><LI><a href=#>餐饮</a>

<UL><LI><a href=#>中国饮食文化</a></UL></UL></LI>

<UL><LI><a href=#>婚纱、服装定做</a><LI><a href=#>本地特产</a><LI><a href=#>花卉（插花、盆景）</a><LI><a href=#>CD、VCD、乐器</a><LI><a href=#>玩具、兴趣、游戏</a><LI><a href=#>妇幼儿童用品</a><LI><a href=#>室内装饰</a><LI><a href=#>日用品</a><LI><a href=#>电脑、家电</a><LI><a href=#>食品、饮料</a><LI><a href=#>服装、服饰、鞋</a><LI><a href=#>专卖店</a><LI><a href=#>综合商场</a></UL></LI><LI><a href=#>居住</a>

<UL><LI><a href=#>旅行</a><LI><a href=#>车船飞机票</a><LI><a href=#>交通</a></UL></LI><LI><a href=#>娱乐</a>

<UL><LI><a href=#>其他（摄影、雕刻

..）</a><LI><a href=#>演出信息</a><LI><a href=#>休闲场所</a><LI><a href=#>酒吧</a><LI><a href=#>书籍</a><LI><a href=#>电影</a><LI><a href=#>音乐</a></UL></LI><LI><a href=#>服务</a>

<UL><LI><a href=#>意大利学习</a>

Posted on 2005-07-05 14:14 古代阅读(1507) 评论(0) 收藏举报

刷新页面返回顶部