当前页面: 开发资料首页 → Javascript 专题 → Javascript实现网页上的多级菜单
Javascript实现网页上的多级菜单
摘要: Javascript实现网页上的多级菜单
Javascript多级菜单v0.9b
作者:detrox
email: detrox@163.net
qq: 2721826
请看左侧的例子:
0.9版特性:
1,可以多级菜单显示
2,可通过定义fShow函数定义菜单的出现方式
3,解决了和dreamweaver的template机制配合时,相对路径在脚本中无法定位的问题
4,可在菜单项上加入图标,支持分割线
5,在有子菜单的菜单项上,显示“〉”标明其是多级菜单
使用方法:
1,包含menu.js和menu.css
2,用创建主菜单类
main = new MainMenu(10,50,"My Menu");
这里,MainMenu的前两个参数表示其左上角位置坐标,前者为left,后者为top。第三个参数为菜单标题。
之后用MenuItem类建立菜单项
MenuItem的源型如下:
function MenuItem(_parent,_caption, _url, _target,_style, _image,_templatePos,_description)
其中,_parent为父菜单项,例如:
Item1 = new MenuItem(main,"detrox's Page","http://detrox.yeah.net"
,"_blank",null,"detrox.gif",false,"detrox's homepage on programming");
建立了一个main的菜单项,又如
Item2 = new MenuItem(Item1,"detrox's Page","http://detrox.yeah.net"
,"_blank",null,"detrox.gif",false,"detrox's homepage on programming");
建立一个Item1的子菜单项
其他参数:
- _caption为菜单项的标题,new当_caption为“-”时可显示分割线。
- url为其连接目的地
- _target为文档读取的位置(同a标签的target属性)
- _style可以添加菜单项的特殊CSS属性
- _image为显示在菜单文字前小图标的路径
- _description为菜单注释(同a标签的title属性)。
特别说明:
_templatePos 用于和Dreamweaver结合制作网页时。当需要使用template机制,而_url又需要在网页中相对定位时。设置_templatePos为true并且需要在dreamweaver的template中加入定位标签:。例如:
template文件:normalPage.dwt存在于站点的templates目录,这需要在normalPage.dwt中加入。
显示菜单:
最后使用,MainMenu的show()命令显示菜单。
例如:
main.show()
用户可以自定义菜单的显示方法。通过定义fShow(id)函数.函数原型如下
fShow(id)
这里id时将要显示的菜单(div元素)的id号。可以通过这个id号控制菜单。定义mfShow(id)可以改变主菜单的显示方法。
注释:
有子菜单的菜单项后的箭头图标文件名必须为arrow.gif文件,如果我提供的箭头颜色和您希望的不符请更改这个文件。
CSS样式的定义:
定义您自己的菜单样式,请修改menu.css,其中
- .sMenuItem 为菜单项被选中时的样式
- .nMenuItem 为菜单项未被选中时的菜单样式
- .mnuTitle 为主菜单的标题样式
- .nMenuBk 为菜单背景层样式
源代码:
<SCRIPT>
/*
* Javascript Multi-Level Menu
*
* Author: detrox
* Date : 2003
*
* version: 0.9b
* enviroment: Microsoft Internet Explorer 5.5 or higher
*
* note: any copy of this file must include this part of message.
*
*/
/*
* Global variables here
*
* Do not change this part
*/
var menuId = 0;
var menuItemId = 0;
var currentLevel = 0;
var levelStat = new Array();
var version = "MMENU;0.9;B;TROX";
var waitForHide;
var waitingTime = 500;
/*
* Global variables for fShow
*/
var menu;
var startOpacity = 20;
var endOpacity = 100;
var tFadeOut = false;
var fadeStep = 30;
var msX = 0,msY =0, mbX, mbY
/*
* User defined function to display a menu
*
*/
var t;
var idid;
function mfShow(id) {
eval(id).style.filter = "progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=2)";
}
function fShow(id) {
eval(id).style.filter = "progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=2)";
}
/*
* Create and insert a new element to the docuemnt
*
*/
function createElem(tag,id,parentId) {
if (parentId) {
eval(parentId).document.open("text/html");
eval(parentId).document.write("<"+tag + " id=\""+ id + "\">"+tag + ">");
eval(parentId).document.close();
} else {
document.open("text/html");
document.write("<"+tag + " id=\""+ id + "\">"+tag + ">");
document.close();
}
return eval(id);
}
/*
* check whether a tag is exist
*/
function ifObject(id) {
var find = document.all.item(id);
return (find)?true:false;
}
/*
* check if mouse hot-point out of the rect
*
*/
function ifPtOutRect() {
if (window.event.x < rect.left || window.event.x > rect.right
|| window.event.y < rect.top || window.event.y > rect.bottom)
true;
else
return false;
}
/*
* hide the menus whose level bewteen startLevel and endLevel
*
*/
function hideMenu(startLevel,endLevel) {
for (i = startLevel; i <= endLevel; i++) {
if (ifObject(("lyr" + i))) {
eval("lyr" + i).style.visibility = "hidden";
levelStat[i] = "hidden";
}
}
}
/*
* Hide all submenu
*/
function hideAllSubMenu() {
hideMenu(1, currentLevel);
}
/*
* class MenuItem
*
* the constructor of the MenuItem class.
*
* Usage: object = new MenuItem(parentItem, caption, url, target, CSS_style, imageFilePath, templatePos, description)
*
*
*/
function MenuItem(_parent,_caption, _url, _target,_style, _image,_templatePos,_description) {
/* define memeber variable*/
this.caption = _caption;
this.description = _description;
this.id = "mi" + menuItemId++;
this.itemId = 0;
this.parent = _parent;
this.needSelected = false;
this.level = this.parent.level + 1;
this.relUrl = "";
if (currentLevel < this.level)
currentLevel = this.level;
if (_style == null)
this.style = "color:#000000; text-decoration: none;"
else
this.style = _style;
this.image = _image;
this.popup = new Array();
if (_templatePos) {//templatePos is using for dreamweaver's template
this.url = lnkDir.href + _url;
this.relUrl = lnkDir.href;
}
else
this.url = _url;
this.target = _target;
/*Add self to the parent's menutiem*/
if (this.parent)
this.parent.popup[this.parent.popup.length++] = this;
var object = this;
this.onmouseover = function() {
/*
if (ifObject("lyr" + object.level))
if (eval("lyr" + object.level).style.visibility == "visible")
if (ifObject(object.id))
return;
*/
clearTimeout(waitForHide);
var i;
for (i = 0; i < object.parent.popup.length; i++) {
eval(object.parent.popup[i].id).className = "nMenuItem";
}
this.className = "sMenuItem";
hideMenu(object.level, currentLevel);
if (object.popup.length > 0) {
var preHTML;
preHTML = "<table width = \"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"; // id=\""+ object.id +"\" >";
for (i = 0; i < object.popup.length; i++) {
var item = object.popup[i];
var extra = "";
if (object.popup[i].popup.length > 0) {
extra = "";
}
if (item.caption == '-') {
preHTML += "<tr><td>";
preHTML += "
";
preHTML += "</td></tr>";
} else {
preHTML += "<tr><td nowrap>";
preHTML += extra + "";
preHTML += " " + item.caption;
preHTML += " </td></tr>";
}
}
preHTML += "</table>";
var oDiv = null;
if (ifObject("lyr" + object.level))
oDiv = eval("lyr" + object.level);
if (oDiv == null) {
_oDiv = document.createElement("div");
_oDiv.id = "lyr" + object.level;
lyrBgnd.appendChild(_oDiv);
object.createdDiv = true;
oDiv = eval("lyr" + object.level);
}
oDiv.innerHTML = preHTML;
/*junction the onmouseover & onmouseout function to the menuitems*/
for (i = 0; i < object.popup.length;i++) {
var item;
item = object.popup[i];
if (item.caption == '-') continue;
eval(item.id).onmouseover = item.onmouseover;
eval(item.id).onmouseout = item.onmouseout;
}
/*change style of mainMenu*/
oDiv.className = "nMenuBk";
var src = window.event.srcElement.offsetParent;
var srcParent;
with (oDiv.style) {
zIndex = 1000 + object.level;
position = "absolute";
top = parseInt(src.offsetTop) + 4 + "px";
left = parseInt(src.offsetLeft) + "px";
width = 0;
srcParent = src.offsetParent;
while (srcParent.tagName.toUpperCase() != "BODY") {
left = parseInt(left) + parseInt(srcParent.offsetLeft) + "px";
top = parseInt(top) + parseInt(srcParent.offsetTop) + "px";
srcParent = srcParent.offsetParent;
}
var tempLeft;
tempLeft = parseInt(left) + parseInt(eval("lyr" + (object.level - 1)).offsetWidth) - 4;
if (parseInt(tempLeft) + parseInt(eval("lyr"+object.level).offsetWidth) > parseInt(document.body.offsetWidth))
tempLeft = parseInt(left) - parseInt(eval("lyr" + object.level).offsetWidth) + 8;
left = tempLeft + "px";
if (typeof(fShow) == "function")
fShow(oDiv.id);
visibility = "visible";
}
} // end of if (object.popup.length > 0)
return
}
this.onmouseout = function() {
waitForHide = setTimeout("hideAllSubMenu()",waitingTime);
return;
}
return this;
}
/*
* Class MainMenu
*
* comment: the constructor of the MainMenu class.
*
* Usage: object = new MainMenu(left,top,title);
*
*
*/
function MainMenu(x,y,title) {
/*member variables*/
this.left = x;
this.top = y;
this.popup = new Array();
this.parent = null;
this.id = "mn" + (menuId++);
this.level = currentLevel++;
this.refUrl = "";
/*member functions*/
object = this;
this.show = function() {
var preHTML;
var i;
/ * draw main menu */
preHTML = "<table width = \"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
preHTML += "<tr><td>"+title+"</td><tr>";
for (i = 0; i < this.popup.length; i++) {
var item = this.popup[i];
var extra = "";
if (object.popup[i].popup.length > 0) {
extra = "";
}
if (item.caption == '-') {
preHTML += "<tr><td>";
preHTML += "
";
preHTML += "</td></tr>";
} else {
preHTML += "<tr><td nowrap>";
preHTML += extra + "";
preHTML += " " + item.caption;
preHTML += " </td></tr>";
}
}
preHTML += "</table>";
/*create background element*/
document.open("text/html");
document.writeln("");
document.close();
lyrBgnd.className = "nBgnd";
/*
this way is bad cause it require a IE5.5 or higher explorer
*/
oDiv = document.createElement("div");
oDiv.id = "lyr" + this.level;
lyrBgnd.appendChild(oDiv);
oDiv.innerHTML = preHTML;
/*
still have problem by this way
oDiv = createElem("div",("lyr" + this.level),null);
oDiv.innerHTML = preHTML;
*/
/*junction the onmouseover & onmouseout function to the menuitems*/
for (i = 0; i < this.popup.length;i++) {
var item;
item = this.popup[i];
if (item.caption == '-') continue;
eval(item.id).onmouseover = item.onmouseover;
eval(item.id).onmouseout = item.onmouseout;
}
/*change style of mainMenu*/
oDiv.className = "nMenuBk";
with (oDiv.style) {
zIndex = 1000;
position = "absolute";
left = this.left;
top = parseInt(this.top);
width = 0;
if (typeof(mfShow) == "function")
mfShow(oDiv.id)
visibility = "visible";
}
return
}
}
</script>
<SCRIPT>
var stl = null;
var img = "";
main = new MainMenu(180,100,"Javascript MultiMenu");
Item1 = new MenuItem(main,"C/C++ Programming","javascript:alert('C/C++ Programming Language');"
,"_self",null,"cpp.gif",false,"Tips");
Item11 = new MenuItem(Item1,"Language Standard","javascript:alert('Standard');"
,"_self",null,"a.gif",false,"Tips");
Item111 = new MenuItem(Item11,"Type","javascript:alert('Type');"
,"_self",null,"a.gif",false,"Tips");
Item1111 = new MenuItem(Item111,"int","javascript:alert('int');"
,"_self",null,"b.gif",false,"Tips");
Item11111 = new MenuItem(Item1111,"unsigned","javascript:alert('unsigned');"
,"_self",null,"c.gif",false,"Tips");
Item11112 = new MenuItem(Item1111,"signed","javascript:alert('signed');"
,"_self",null,"d.gif",false,"Tips");
Item1112 = new MenuItem(Item111,"long","javascript:alert('long');"
,"_self",null,"e.gif",false,"Tips");
Item112 = new MenuItem(Item11,"Class","javascript:alert('Class');"
,"_self",null,"f.gif",false,"Tips");
new MenuItem(Item11,"-","javascript:alert('function');"
,"_self",null,"g.gif",false,"Tips");
Item113 = new MenuItem(Item11,"function","javascript:alert('function');"
,"_self",null,"h.gif",false,"Tips");
Item12 = new MenuItem(Item1,"STL Library","javascript:alert('STL');"
,"_self",null,"jav.gif",false,"Tips");
Item13 = new MenuItem(Item1,"Boost Library","javascript:alert('Boost');"
,"_self",null,"h.gif",false,"Tips");
Item131 = new MenuItem(Item13,"lexcial_cast","javascript:alert('Lexical_cast');"
,"_self",null,"jav.gif",false,"Tips");
Item1311 = new MenuItem(Item131,"movment","javascript:alert('movment');"
,"_self",null,"a.gif",false,"Tips");
Item1312 = new MenuItem(Item131,"usage","javascript:alert('usage');"
,"_self",null,"b.gif",false,"Tips");
Item1313 = new MenuItem(Item131,"source","javascript:alert('source code');"
,"_self",null,"c.gif",false,"Tips");
Item13131 = new MenuItem(Item1313,"download here","javascript:alert('here');"
,"_self",null,"cpp.gif",false,"Tips");
Item13132 = new MenuItem(Item1313,"download there","javascript:alert('there');"
,"_self",null,"d.gif",false,"Tips");
Item132 = new MenuItem(Item13,"format","javascript:alert('fromat');"
,"_self",null,"e.gif",false,"Tips");
Item14 = new MenuItem(Item1,"C++ on OOP","javascript:alert('OOP');"
,"_self",null,"f.gif",false,"Tips");
new MenuItem(main,"-","javascript:alert('C/C++ Programming Language');"
,"_self",null,"cpp.gif",false,"Tips");
Item2 = new MenuItem(main,"Assembly Programming","javascript:alert('Windows 32bit Assembly');"
,"_self",null,"asm.gif",false,"Tips");
Item21 = new MenuItem(Item2,"Hutch's MASM32","javascript:alert('A good stuff');"
,"_self",null,"masm.gif",false,"Tips");
Item21 = new MenuItem(Item2,"Luo's Tutor","javascript:alert('a good tutor, very good');"
,"_self",null,"luo.gif",false,"Tips");
Item3 = new MenuItem(main,"Javascript Programming","javascript:alert('Javascript on HTML');"
,"_self",null,"jav.gif",false,"Tips");
main.show();
</script>
</td>
</tr>
<tr>
<td vAlign=top align=left height="100%">
↑返回目录
前一篇: 让你的网页更精彩 - Javascript 调用MSAgent
后一篇: 扫雷