网络编程
位置：首页>> 网络编程>> JavaScript>> javascript封装的下拉导航菜单渐显效果

javascript封装的下拉导航菜单渐显效果

作者：littlephenix　来源：蓝色理想　发布时间：2007-08-04 20:11:00　

标签：下拉菜单,导航,javascript

内容摘要：本文介绍了使用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 += '&nbsp;&nbsp;<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 += '&nbsp;&nbsp;&nbsp;&nbsp;' + 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文件里。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com