用javascript封装的导航菜单

2008-02-23 07:57:19来源：互联网阅读 ()

正好这几天公司不忙，学校又没有事情，所以想抽空架一个个人主页，设计的时候想在主页做一个酷酷的导航菜单，于是就上网找灵感。有一个网站的导航栏给我的印象不错,于是就把网页保存下来想研究一下它的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> <p class="article-con-biaoqian mt-20"> <span>标签：</span> </p> <p class="banquan">版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com<br/> 特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 </p> </div> <a href="https://love.4c.cn/" target="_blank"><img src="http://www.west999.com/www/wp-content/uploads/2019/10/-20" alt=""/></a> <div class="other-article mt-10 font14"> <p><span class="mr-20">上一篇：<a href='/info/html/wangyezhizuo/Javascript/20080224/33926.html'>如何在网页中嵌入Media player 播放流媒体文件</a> </span></p> <p><span class="mr-20">下一篇：<a href='/info/html/wangyezhizuo/Javascript/20080224/33933.html'>JavaScript版幻灯片效果</a> </span></p> </div> <div class="relative-link mt-20"> <div class="relative-tab"> <span class="relative-tab-active">相关文章</span> </div> <div class="relative-con"> <div class="relative-list mt-20"> <ul> </ul> </div> </div> </div> </div> <div class="category mt-20"> <p><span>IDC资讯：</span> <a href="/info/html/IDCzixun/xunizhuji/">主机资讯</a> <a href="/info/html/IDCzixun/yumingzhuce/">注册资讯</a> <a href="/info/html/IDCzixun/zhujizuyong/">托管资讯</a> <a href="/info/html/IDCzixun/vpszhuji/">vps资讯</a> <a href="/info/html/IDCzixun/zhinenjianzhan/">网站建设</a> </p><p><span>网站运营：</span> <a href="/info/html/wangzhanyunying/jianzhanjingyan/">建站经验</a> <a href="/info/html/wangzhanyunying/cehuayingli/">策划盈利</a> <a href="/info/html/wangzhanyunying/sousuoyouhua/">搜索优化</a> <a href="/info/html/wangzhanyunying/wangzhantuiguang/">网站推广</a> <a href="/info/html/wangzhanyunying/mianfeiziyuan/">免费资源</a> </p><p><span>网站联盟：</span> <a href="/info/html/wangzhanlianmeng/lianmengxinwen/">联盟新闻</a> <a href="/info/html/wangzhanlianmeng/lianmengjieshao/">联盟介绍</a> <a href="/info/html/wangzhanlianmeng/lianmengdianping/">联盟点评</a> <a href="/info/html/wangzhanlianmeng/wangzhuanjiqiao/">网赚技巧</a> </p><p><span>行业资讯：</span> <a href="/info/html/xingyezixun/sousuoyinqing/">搜索引擎</a> <a href="/info/html/xingyezixun/wangluoyouxi/">网络游戏</a> <a href="/info/html/xingyezixun/dianzishangwu/">电子商务</a> <a href="/info/html/xingyezixun/guanggaochuanmei/">广告传媒</a> </p><p><span>网络编程：</span> <a href="/info/html/wangluobiancheng/DotNetBianCheng/">Asp.Net编程</a> <a href="/info/html/wangluobiancheng/Aspbiancheng/">Asp编程</a> <a href="/info/html/wangluobiancheng/Phpbiancheng/">Php编程</a> <a href="/info/html/wangluobiancheng/Xmlbiancheng/">Xml编程</a> <a href="/info/html/wangluobiancheng/Access/">Access</a> <a href="/info/html/wangluobiancheng/Mssql/">Mssql</a> <a href="/info/html/wangluobiancheng/Mysql/">Mysql</a> <a href="/info/html/wangluobiancheng/qita/">其它</a> </p><p><span>服务器技术：</span> <a href="/info/html/fuwuqijishu/Webfuwuqi/">Web服务器</a> <a href="/info/html/fuwuqijishu/Ftpfuwuqi/">Ftp服务器</a> <a href="/info/html/fuwuqijishu/Mailfuwuqi/">Mail服务器</a> <a href="/info/html/fuwuqijishu/Dnsfuwuqi/">Dns服务器</a> <a href="/info/html/fuwuqijishu/anquanfanghu/">安全防护</a> </p><p><span>软件技巧：</span> <a href="/info/html/ruanjianjiqiao/qitaruanjian/">其它软件</a> <a href="/info/html/ruanjianjiqiao/Word/">Word</a> <a href="/info/html/ruanjianjiqiao/Excel/">Excel</a> <a href="/info/html/ruanjianjiqiao/Powerpoint/">Powerpoint</a> <a href="/info/html/ruanjianjiqiao/Ghost/">Ghost</a> <a href="/info/html/ruanjianjiqiao/Vista/">Vista</a> <a href="/info/html/ruanjianjiqiao/QQkongjian/">QQ空间</a> <a href="/info/html/ruanjianjiqiao/QQ/">QQ</a> <a href="/info/html/ruanjianjiqiao/FlashGet/">FlashGet</a> <a href="/info/html/ruanjianjiqiao/xunlei/">迅雷</a> </p><p><span>网页制作：</span> <a href="/info/html/wangyezhizuo/FrontPages/">FrontPages</a> <a href="/info/html/wangyezhizuo/Dreamweaver/">Dreamweaver</a> <a href="/info/html/wangyezhizuo/Javascript/">Javascript</a> <a href="/info/html/wangyezhizuo/css/">css</a> <a href="/info/html/wangyezhizuo/photoshop/">photoshop</a> <a href="/info/html/wangyezhizuo/fireworks/">fireworks</a> <a href="/info/html/wangyezhizuo/Flash/">Flash</a> </p><p><span>程序设计：</span> <a href="/info/html/chengxusheji/Javajishu/">Java技术</a> <a href="/info/html/chengxusheji/C-C--/">C/C++</a> <a href="/info/html/chengxusheji/VB/">VB</a> <a href="/info/html/chengxusheji/delphi/">delphi</a> </p><p><span>网络知识：</span> <a href="/info/html/wangluozhishi/wangluoxieyi/">网络协议</a> <a href="/info/html/wangluozhishi/wangluoanquan/">网络安全</a> <a href="/info/html/wangluozhishi/wangluoguanli/">网络管理</a> <a href="/info/html/wangluozhishi/zuwangfangan/">组网方案</a> <a href="/info/html/wangluozhishi/Ciscojishu/">Cisco技术</a> </p><p><span>操作系统：</span> <a href="/info/html/caozuoxitong/Win2000/">Win2000</a> <a href="/info/html/caozuoxitong/WinXP/">WinXP</a> <a href="/info/html/caozuoxitong/Win2003/">Win2003</a> <a href="/info/html/caozuoxitong/Mac-OS/">Mac OS</a> <a href="/info/html/caozuoxitong/Linux/">Linux</a> <a href="/info/html/caozuoxitong/FreeBSD/">FreeBSD</a> </p> </div> </div> <div class="rightcon f-r ml-20"> <div class="sider-img"> <a href="https://www.west.cn/cloudhost/?ReferenceID=zzxxw999" target="_blank" title="云服务器仅需0.69元/天起！快速备案，无需幕布！"><img src="http://www.west999.com/www/wp-content/uploads/2019/10/-12"></a> </div> <div class="right-sider mt-20"> <div class="sider-title clearfix"><strong class="f-l"><i class="iconfont font20 icon-read"></i>热门词条</strong></div> <div class="biaoqian-con"> </div> </div> <div class="right-sider mt-20"> <div class="sider-title"><strong><i class="iconfont font20 icon-liebiaodaohang_zixun"></i>最新资讯</strong></div> <div class="sider-con pt-10"> <ul> <li><a href="/info/html/wangyezhizuo/photoshop/20210526/4674019.html"><i class="radius"></i>Photoshop绘制立体风格的微笑表情</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674018.html"><i class="radius"></i>PS文字特效教程：制作公路上个性的涂鸦</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674017.html"><i class="radius"></i>Photoshop设计卷边效果的变形金刚电影</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674016.html"><i class="radius"></i>PS色彩修复教程：利用色阶工具快速给红</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674015.html"><i class="radius"></i>PS半透明物体抠图：利用通道选区工具抠</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674014.html"><i class="radius"></i>PS海报设计技巧教程：学习制作个性的扭</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674013.html"><i class="radius"></i>PS图片特效制作教程：学习给铁塔图片制</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674012.html"><i class="radius"></i>学习用photoshop把浑浊的海水照片后期</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674011.html"><i class="radius"></i>PS古风照片教程：给古风美女打造出女侠</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674010.html"><i class="radius"></i>PS个性人物海报制作：设计创意时尚的玻</a></li> </ul> </div> </div> <div class="right-sider mt-20"> <div class="sider-title"><strong><i class="iconfont font20 icon-remen"></i>热门关注</strong></div> <div class="sider-con pt-10"> <ul> <li><a href="/info/html/wangyezhizuo/Javascript/20080224/34146.html"><i class="radius"></i>用javascript实现Base64编码</a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20180624/4232651.html"><i class="radius"></i>【运行错误】Uncaught DOMException: B</a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20180624/4234359.html"><i class="radius"></i>socket.io 出现的WebSocket is closed </a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20180624/4234038.html"><i class="radius"></i>charles抓包出现乱码 SSL Proxying no</a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20180810/4479311.html"><i class="radius"></i>ES6 require ( 路径变量 ) 相关使用方</a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20190220/4613094.html"><i class="radius"></i>echarts在地图上绘制散点图（任意点）</a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20190814/4654288.html"><i class="radius"></i>Nuxt项目搭建到发布部署</a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20180624/4232064.html"><i class="radius"></i>省市区三级联动下拉列表，获取地区编号</a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20180624/4232612.html"><i class="radius"></i>最全前端资源汇总</a></li> <li><a href="/info/html/wangyezhizuo/Javascript/20190814/4653844.html"><i class="radius"></i>layui table表格表头与内容列错位问</a></li> </ul> </div> </div> <div class="right-sider mt-20"> <div class="sider-title clearfix"><strong class="f-l"><i class="iconfont font20 icon-tag"></i>热门标签</strong></div> <div class="biaoqian-con pt-10"></div> </div> </div> </div> </div> <div id="footer"> <div class="gray-line"></div> <div class="white-line"></div>   <div class="footer-bottom"> <p>为学习和知识分享目的，本站文章部分自网络，本站文章部分自网络，如有侵权，请联系：2653426586@qq.com QQ：2653426586 </p> <p>如有其他需求，请联系：2653426586@qq.com QQ：2653426586 </p> <p> <span>友情链接：</span> <a href="https://www.lnmpweb.cn/" target="_blank">网络安全</a> <a href="https://www.ysidc.top/" target="_blank">运维经验</a> <a href="https://blog.mydns.vip" target="_blank">IT技术分享</a> <a href="https://www.jdian.vip/" target="_blank">运维随笔录</a> <a href="http://www.aihuaju.com/" target="_blank">鲜花</a> <a href="https://www.dongjiaospa.vip/" target="_blank">东郊到家</a> <a href="https://www.wangyuespa.vip/" target="_blank">往约到家</a> </p> </div></div><iframe src="https://market.aliyun.com/products/57742013/cmjj00059601.html?" width="0" height="0"></iframe><iframe src="https://market.aliyun.com/products/57742013/cmjj00060340.html?" width="0" height="0"></iframe><div style=" display:none;"> <script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?db46b5f21c293739bcbcfa2490e39804"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script><script>(function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s);})();</script></div><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-1045757556');</script> <script type="text/javascript"> $(".relative-link").slide( { mainCell:".relative-con", titCell:".relative-tab > a", titOnClassName:"relative-tab-active", effect:"fold" }); </script> </body> </html>