javascript封装的下拉导航菜单渐显效果
作者:littlephenix 来源:蓝色理想 时间:2007-08-04 20:11:00
内容摘要:本文介绍了使用js来实现下拉伸缩导航菜单的功能,并带有渐显的效果,值得收藏。
正好这几天公司不忙,学校又没有事情,所以想抽空架一个个人主页,设计的时候想在主页做一个酷酷的导航菜单,于是就上网找灵感。有一个网站的导航栏给我的印象不错,于是就把网页保存下来想研究一下它的js代码,没想到的是竟然是用.NET的自定义控件生成的!上面的代码差点没把我看晕过去!(有兴趣的话可以试一试哦,里面N多变量的~~~汗),还好大三时学过c#(垃圾)加上它的控件可以试用,就下下来用了,感觉还真的不错,简单易用,可是~测试的时候差点没昏了!NND试用版的竟然只能再本机测试,别人的PC访问不但显示不了网页还警告说要注册购买!!!!大哥的竟然还要$(本少爷每月实习补助才1千¥啊),一怒之下决定自己封装一个。参考了树型菜单的js源码,花了3天时间,终于第一版写好了^_^
由于imags文件夹传不上来,所以菜单背景的切换效果显示不了^_^大家定制自己喜欢的样式^_^
下面是主要的js代码,方便大家研究,呵呵:
<script language="javascript">
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>
PS:里面的script代码和style样式可以写在单独的js和css文件里。
标签:下拉菜单,导航,javascript
0
投稿
猜你喜欢
python基础知识之字典(Dict)
2023-08-25 20:01:44
Ubuntu系统安装与配置MySQL
2024-01-27 17:41:37
java URL 获取PHP JSON 数据
2023-11-14 18:02:02
python中gevent库的用法详情
2022-10-17 11:14:43
python 星号(*)的多种用途
2021-08-13 06:16:27
pygame编写音乐播放器的实现代码示例
2021-08-12 18:08:48
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2024-04-25 13:12:57
css分页放大镜效果
2008-11-02 15:35:00
Django修改app名称和数据表迁移方案实现
2022-12-14 17:09:11
将Session值储存于SQL Server中
2024-01-22 08:22:31
Python读取图片为16进制表示简单代码
2021-07-24 09:34:15
SQL基础查询和LINQ集成化查询
2024-01-18 21:51:47
CSS制作滑动折叠的文字效果
2008-12-01 13:10:00
Python 中字符串拼接的多种方法
2023-09-25 07:02:13
Python断言assert的用法代码解析
2021-10-05 21:57:07
Django在pycharm下修改默认启动端口的方法
2023-09-27 09:04:07
ASP 改良版MD5、SHA256多重加密类(二次及多次)
2012-11-30 20:26:47
W3C Group的JavaScript1.8新特性介绍
2009-07-24 12:31:00
mysql 5.7.18 Archive压缩版安装教程
2024-01-16 03:05:35
python执行shell获取硬件参数写入mysql的方法
2024-01-26 15:56:04