前天gu1dai发的无限右弹的菜单--〉横向版()

e_ 2005-07-13 05:44:20
效果如下:
----------------------------------
[菜单一][菜单二][菜单三][菜单四][菜单五]
[菜单一-][菜单一=]
[菜单一-][菜单一=]
[菜单一-][菜单一=]
[菜单一-]
[菜单一-]
[菜单一-]
--------------------------------------
做事要有始有终,前几天发的那个改自经典论坛的无限右弹菜单,改来改去,并对其中的css做了很多修改,很多注释 :( 依然不支持mozilla. :( 。承蒙朋友们的关注,正面的评价多于负面的评价。:),按照大家的意见,改到最后,增加了图片指向,并使css的定义不影响全局的css定义,以及作上我的注释(由于自己的css水平很菜,肯定有注释不对的地方,还请朋友们指正)。

当时有个朋友提出要改成横向的,我今天看了下,改了css的几个定义,结果它就变成横向的了。

发出来,以供参考。

demo地址:
http://base5.w926.com/base5/js/menu.html
由于在下没有个人空间,只好借用朋友的。


...全文
158 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
e_ 2005-07-15
  • 打赏
  • 举报
回复
从这个菜单改出来的所有菜单都不支持mozilla
gu1dai 2005-07-14
  • 打赏
  • 举报
回复
ding
e_ 2005-07-13
  • 打赏
  • 举报
回复
代码

<SCRIPT LANGUAGE="JavaScript">
<!--
// 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";
//info.value = this.outerHTML;
}
node.onmouseout=function()
{
this.className= "outbg";
}
}
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:100% ;
BORDER:1px solid #008;
list-style:disc inside ;
}

UL#navitree LI.overbg {
background:#eeeeee no-repeat top right;
color:white;
}
UL#navitree LI.outbg {
background:#eeeeee no-repeat top right;
color:white;
}
/*这一句绝不能少,这是定义id 为navitree下的所有ul,包括ul的ul*/
UL#navitree UL{
BORDER-left:1px solid #008;BORDER-top:1px solid #008;BORDER-right:1px solid #008;BORDER-bottom:1px solid #008;
PADDING : 0px; MARGIN: 0px;
}
/*定义id 为 navitree 的 UL 下的所有LI*/
UL#navitree LI {
float:left;
width:80px; padding:0px;MARGIN: 0px; position:relative;
}
/*初始化 id 为 navitree 的 UL 下的所有LI css样式为outbg时 */
UL#navitree LI.outbg UL{ DISPLAY:none; }

/*定义a link的样式*/
UL#navitree LI A { PADDING: 3px; DISPLAY: block; COLOR: #777; TEXT-DECORATION: none; }
UL#navitree LI A:hover { COLOR: white }

/*下面这一句异常关键,不可少*/
.navitree LI UL {
DISPLAY: none; position:absolute;
}
/*这一句定义class为navitree的UL-〉LI->UL->LI->UL,这一句和上一句都是用来定义子UL的显示位置的。*/
.navitree LI UL LI UL{
DISPLAY: block; position:absolute;left:80px;top:0px;
}
/*定义有子菜单的LI鼠标移过,移出的样式*/

UL#navitree LI UL LI.overbg {
background:url(D://usr//www//html//mambog/modules/navicategory/arr.gif) #eeeeee no-repeat top right;
color:white;
}

UL#navitree LI UL LI.outbg {background:url(D://usr//www//html//mambog/modules/navicategory/arr.gif) #dddddd no-repeat top right;
color:white;
}
LI.overbg UL{DISPLAY: block;}
LI.outbg UL{DISPLAY:none;}

/*定义无子菜单的LI鼠标移过,移出的样式*/
LI.over {background:#eeeeee;}
LI.out {background:white;}

</style>

<UL id="navitree" class="navitree">
<LI><a href=#>生活</a>
<UL><LI><a href=#>主要菜系</a>
<UL><LI><a href=#>论坛</a><LI><a href=#>菜系简介</a>
<UL><LI><a href=#>简介之间</a>
<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>
<LI><a href=#>购物</a>
<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></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><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>
<UL><LI><a href=#>兼职</a></UL></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></UL></LI><LI><a href=#>学习/培训</a>
<UL><LI><a href=#>意大利学习</a>
<UL><LI><a href=#>top 学习培训</a></UL><a href=#>文化交流</a><LI><a href=#>家教</a><LI><a href=#>英文培训</a><LI><a href=#>中文讲座</a></UL></LI></UL>

<PRE>
<h2>横向菜单</h2>
我改了下,这个带图片箭头。图片箭头在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>;

<!--如果你不调试,去掉js里的这一句。info.value = this.outerHTML;去掉<textarea>-->
</PRE>
<!--<TEXTAREA NAME="info" ROWS="20" COLS="80"></TEXTAREA>-->

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧