当前页面: 开发资料首页 → Javascript 专题 → 用javascript封装的导航菜单
用javascript封装的导航菜单
摘要: 用javascript封装的导航菜单
正好这几天公司不忙，学校又没有事情，所以想抽空架一个个人主页，设计的时候想在主页做一个酷酷的导航菜单，于是就上网找灵感。有一个网站的导航栏给我的印象不错,于是就把网页保存下来想研究一下它的js代码，没想到的是竟然是用.NET的自定义控件生成的！上面的代码差点没把我看晕过去！（有兴趣的话可以试一试哦，里面N多变量的～～～汗），还好大三时学过c＃（垃圾）加上它的控件可以试用，就下下来用了，感觉还真的不错，简单易用，可是～测试的时候差点没昏了！NND试用版的竟然只能再本机测试，别人的PC访问不但显示不了网页还警告说要注册购买！！！！大哥的竟然还要$（本少爷每月实习补助才1千￥啊），一怒之下决定自己封装一个。参考了树型菜单的js源码，花了3天时间，终于第一版写好了^_^
由于imags文件夹传不上来，所以菜单背景的切换效果显示不了^_^大家定制自己喜欢的样式^_^
运行代码框
<textarea class=fm id=code rows=12 cols=78> HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head>
\n';
if (document.getElementById) {
str += this.addItem(this.root);
} else str += 'Browser not supported.';
str += '\n
';
//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 += ' ';
}
if (pItem.url) {
str += '';
}
str += ' ' + pItem.label;
if (pItem.url) str += '';
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; nPhenix panelbar
<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> </textarea><input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code')" type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
PS：里面的script代码和style样式可以写在单独的js和css文件里。
</td> </tr> </table>↑返回目录
前一篇: JavaScript版幻灯片效果
后一篇: Javascript实现经典的图片切换效果