用javascript封装的导航菜单

　用javascript封装的导航菜单

作者：littlephenix　时间： 2006-03-23　文档类型：原创　来自：蓝色理想

正好这几天公司不忙，学校又没有事情，所以想抽空架一个个人主页，设计的时候想在主页做一个酷酷的导航菜单，于是就上网找灵感。有一个网站的导航栏给我的印象不错,于是就把网页保存下来想研究一下它的js代码，没想到的是竟然是用.NET的自定义控件生成的！上面的代码差点没把我看晕过去！（有兴趣的话可以试一试哦，里面N多变量的～～～汗），还好大三时学过c＃（垃圾）加上它的控件可以试用，就下下来用了，感觉还真的不错，简单易用，可是～测试的时候差点没昏了！NND试用版的竟然只能再本机测试，别人的PC访问不但显示不了网页还警告说要注册购买！！！！大哥的竟然还要$（本少爷每月实习补助才1千￥啊），一怒之下决定自己封装一个。参考了树型菜单的js源码，花了3天时间，终于第一版写好了^_^
由于imags文件夹传不上来，所以菜单背景的切换效果显示不了^_^大家定制自己喜欢的样式^_^

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Phenix PanelBar</title> <script language="javascript"> /*--------------------------------------------------| | Phenix PanelBar | www.seu.edu.cn | |---------------------------------------------------| | | | I believe one day I can fly like phenix! | | | | Finished: 17.11.2004 | |--------------------------------------------------*/ //item object //alert("arrived here"); function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){ this.id=id; this.pid=pid; this.label=label; this.url=url; this.title=title; this.target=target; this.img=img; this.over=over; this.img2=img2; this.over2=over2; this.type=type; //this._ih = false; //is it the head item? this._hc = false; //has the child item? this._ls = false; //has sibling item? this._io = false; //whether the panelbar is open? }; //menu object function PhenMenu(objName) { this.config = { closeSameLevel : true }; //alert("asdsdf"); this.obj = objName; this.items = []; this.root = new PhenItem(-1); }; //add a new item to the item array PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){ this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target); }; // Outputs the menu to the page PhenMenu.prototype.toString = function() { //alert("arrived here"); var str = '<div>\n'; if (document.getElementById) { str += this.addItem(this.root); } else str += 'Browser not supported.'; str += '\n</div>'; //alert(str); //document.write(str); //alert(this.items[0]._hc); return str; }; // Creates the menu structure PhenMenu.prototype.addItem = function(pItem) { var str = ''; //var n=0; for (var n=0; n<this.items.length; n++) { if(this.items[n].pid == pItem.id){ var ci = this.items[n]; //alert(ci.pid); //alert(ci.id); this.setHS(ci); //alert("item:"+ci._hc); //alert(ci._ls); str += this.itemCreate(ci, n); if(ci._ls) break; } } return str; }; // Creates the node icon, url and text PhenMenu.prototype.itemCreate = function(pItem, itemId) { //alert(pItem.type.toLowerCase()); var str = ''; if(pItem.type == 'header') str = '<table width="100%" class="header" valign="middle" onmouseover="this.className=\'headerSelected\'" onmouseout="this.className=\'header\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>'; else str = '<table width="100%" class="item" valign="middle" onmouseover="this.className=\'itemOver\'" onmouseout="this.className=\'item\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>'; if (pItem.img) { str += '  <img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />'; } if (pItem.url) { str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"'; if (pItem.title) str += ' title="' + pItem.title + '"'; if (pItem.target) str += ' target="' + pItem.target + '"'; str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"'; str += '>'; } str += '    ' + pItem.label; if (pItem.url) str += '</a>'; str += '</td></tr></table>'; //alert(pItem.url); //alert(str); if (pItem._hc) { str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>'; str += this.addItem(pItem); str += '</td></tr></table>'; //alert(str); //document.write(str); } return str; }; // Checks whether a item has child and if it is the last sibling PhenMenu.prototype.setHS = function(pItem) { var lastId; for (var n=0; n<this.items.length; n++) { if (this.items[n].pid == pItem.id) pItem._hc = true; if (this.items[n].pid == pItem.pid) lastId = this.items[n].id; } if (lastId==pItem.id) pItem._ls = true; }; // Toggle Open or close PhenMenu.prototype.o = function(id) { //alert(this.items.length); var ci = this.items[id]; //alert(ci); //this.setHS(ci); //alert(this.items[id]._hc); this.itemStatus(!ci._io, id); ci._io = !ci._io; if (this.config.closeSameLevel) this.closeLevel(ci); }; // Change the status of a item(open or closed) PhenMenu.prototype.itemStatus = function(status, id) { cTable = document.getElementById('ct' + this.obj + id); if(status){ cTable.filters.item(0).Apply(); cTable.style.display = 'block'; cTable.style.visibility = ""; cTable.filters.item(0).Play(); } else cTable.style.display = 'none'; //cDiv.style.display = (status) ? 'block': 'none'; }; // Closes all items on the same level as certain item PhenMenu.prototype.closeLevel = function(pItem) { //alert(this.items[0]._hc); for (var n=0; n<this.items.length; n++) { //alert(this.items[n]._hc); if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) { this.itemStatus(false, n); this.items[n]._io = false; this.closeAllChildren(this.items[n]); } } }; PhenMenu.prototype.closeAllChildren = function(pItem) { for (var n=0; n<this.items.length; n++) { if (this.items[n].pid == pItem.id && this.items[n]._hc) { if (this.items[n]._io) this.itemStatus(false, n); this.items[n]._io = false; this.closeAllChildren(this.items[n]); } } }; </script> <style> .header { height:25px; FONT-FAMILY: Arial,Verdana; background-image:url(images/sideNavCategoryBg.gif); font-size:11px; color: #666666; } .headerSelected { height:25px; FONT-FAMILY: Arial,Verdana; background-image:url(images/sideNavCategorySelectedBg.gif); font-size:11px; background-repeat:repeat-x; COLOR: #333333; CURSOR: pointer; } .navigation_item { PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none } .item { PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; } .itemOver { PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED } .itemSelected { PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline; } A.headerSelected { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px } </style> </head> <body> <table width="221" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <p>Phenix panelbar</p> <script type="text/javascript"> p = new PhenMenu('p'); //alert("asds"); p.add(0,-1,'label1凤凰','','header','http://www.telerik.com/images/ProductImages//e.gif'); p.add(1,0,'label1.1凤凰','www.sina.com.cn'); p.add(2,0,'label1.2','www.sina.com.cn'); p.add(3,0,'label1.3','www.sina.com.cn'); p.add(4,0,'label1.4','www.sina.com.cn'); p.add(5,-1,'label2','','header','http://www.telerik.com/images/ProductImages//c.gif'); p.add(6,5,'label2.1','www.seu.edu.cn'); p.add(7,5,'label2.2','www.seu.edu.cn'); p.add(8,5,'label2.3','www.seu.edu.cn'); p.add(9,5,'label2.4','www.seu.edu.cn'); p.add(10,-1,'label3','','header','http://www.telerik.com/images/ProductImages//m.gif'); p.add(11,10,'label3.1','www.seu.edu.cn'); p.add(12,10,'label3.2','www.seu.edu.cn'); p.add(13,10,'label3.3','www.seu.edu.cn'); p.add(14,10,'label3.4','www.seu.edu.cn'); p.add(15,-1,'label4','','header','http://www.telerik.com/images/ProductImages//r.gif'); p.add(16,15,'label4.1','www.seu.edu.cn'); p.add(17,15,'label4.2','www.seu.edu.cn'); p.add(18,15,'label4.3','www.seu.edu.cn'); p.add(19,15,'label4.4','www.seu.edu.cn'); //alert(p.items.length) document.write(p); //p.toString(); //alert(p.items.length); //delete(p); </script> </td> </tr> </table> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

PS：里面的script代码和style样式可以写在单独的js和css文件里。

经典论坛讨论帖：
http://www.blueidea.com/bbs/NewsDetail.asp?id=1828107

出处：蓝色理想
责任编辑：moby

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

更多相关链接

jscript/javascript条件编译

实现一个日期下拉菜单

基于 Ajax 的无限级菜单

flash8与javascript集成

web关联菜单实现方法


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule