一个非常不错的左键弹出菜单。就象WINDOW的右键属性。。

作者：佚名来源：不详发布时间：2006-10-29 0:23:38 发布人：admin

要完成此效果需要两个步骤

第一步：把如下代码加入到<head>区域中

.menuBorder2{
  position:absolute; top:0; left:0;
  background-color:#C6C3C6;    /* light gray */
  overflow:none;
  margin: 4px 0px 4px 0px;
  border: solid 1px;
  border-left-color:white;
  border-top-color:white;
  border-bottom-color:#848284; /* dark grey */
  border-right-color:#848284;  /* dark grey */
  cursor:default;
  }

.menuTable {}

.menuRow {
  font-size: 9pt;
  color:black;
  background-color:transparent;
  cursor:default;
  height:12pt;
  }

.menuImageCell {
  text-align:left;
  cursor:default;
  }

.menuCaptionCell {
  text-align:left;
  cursor:default;
  }

.menuArrowCell {
  text-align:right;
  font-size: 8pt; 
  cursor:default;
  }

#MENUINSERT {
  position:absolute;
  top:0; left:0;
}
</style>

var menus = new Array()

function MenuRegister(item) 
{
  menus[menus.length] = item
  return (menus.length - 1)
}

function MenuItem(caption, command, image, submenu, separator)  //创建自己的菜单目录的对象
{
  this.caption = caption;
  this.command = command;
  this.image = image;
  this.submenu = submenu;
  this.separator = (separator) ? true : false;
  this.id = MenuRegister(this); 
}

function MenuItemOnClick(obj)  //响应鼠标oncklick事件
{
  var item = menus[obj.menuid]
  var menub1 = document.all['MENU' + item.parent + 'B1']

window.event.cancelBubble = true

if (item == null) return

if ((typeof item.command) == 'function') item.command()
  if ((typeof item.command) == 'string') window.location = item.command
}

function MenuItemOnMouseOver(obj)  //鼠标在菜单上移动时的事件处理
{
  var item = menus[obj.menuid]
  var parent = menus[item.parent]
  var menub1 = document.all['MENU' + item.parent + 'B1']
  var fromElement = window.event.fromElement
  var toElement = window.event.toElement

window.event.cancelBubble = true
  //鼠标在菜单边缘,则什么也不做
  if ((fromElement != null) && (toElement != null))
  {
    if (fromElement.menuid == toElement.menuid) return;
  }

obj.style.backgroundColor = '#000084'  // 改变背景颜色为蓝色
  obj.style.color = 'white'              // 改变文字颜色为白色

//处理子菜单状态
  //关闭当前打开的子菜单
  if ((parent.submenu != null) && (parent.submenu != item.submenu))
  {
    parent.submenu.hide()
    parent.submenu = null
  }

// 打开当前菜单目录的子菜单
  if ((item.submenu != null) && (parent.submenu != item.submenu)) 
  {
    item.submenu.top = menub1.offsetTop + obj.offsetTop;
    item.submenu.left = menub1.offsetLeft + obj.offsetWidth;
    item.submenu.show()
    parent.submenu = item.submenu
    return;
  }

}

function MenuItemOnMouseOut(obj)  //鼠标移出菜单的事件处理
{
  var item = menus[obj.menuid]
  var parent = menus[item.parent]
  var toElement = window.event.toElement

window.event.cancelBubble = true

if ((toElement != null) && (toElement.menuid == parent.id)) { 
    if ((parent.submenu != null) && (parent.submenu != item))
    {
      parent.submenu.hide()
      parent.submenu = null
    }
  }

if ((window.event.fromElement != null) && (window.event.toElement != null))
  {
    if (window.event.fromElement.menuid == window.event.toElement.menuid) return;

}

obj.style.backgroundColor = "transparent"
  obj.style.color = 'black'
}

function MenuItemToString() 
{
  if (this.separator)
    return "<tr><td class=menuSep colspan=3><hr></td></tr>\n"

return "  <tr class=menuRow \n" +
         "      onMouseOver='MenuItemOnMouseOver(this)'\n" +
         "      onMouseOut='MenuItemOnMouseOut(this)'\n" +
         "      onClick='MenuItemOnClick(this)'\n" +
         "      menuid=" + this.id +
         "      >\n" +
         "    <td class=menuImageCell noWrap=noWrap menuid=" + this.id + ">" + 
                 ((this.image != null) ? "  <img src='" + this.image + "' onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">  " : "  " ) + "</td>\n" +
         "    <td class=menuCaptionCell noWrap=noWrap menuid=" + this.id + ">" + this.caption +

"</td>\n" +
         "    <td class=menuArrowCell noWrap=noWrap menuid=" + this.id + " " + 
           ((this.submenu != null) ? "style='font-family:Webdings'>4" :

"style='font-family:times'>   ") + "</td>\n" +
         "  </tr>\n";
}

MenuItem.prototype.toString = MenuItemToString;

function Menu(top, left) //将鼠标的位置作为菜单的左顶点创建菜单
{
  this.items = new Array()
  this.top = top
  this.left = left
  this.id = MenuRegister(this)
  this.update = true;

MENUINSERT.insertAdjacentHTML('BeforeEnd', this.borders())
}

function MenuAddItem(item)  //添加子菜单,子菜单继承其父菜单的的属性
{
  this.items[this.items.length] = item
  item.parent = this.id
}

function MenuShow(noDisplay)   //实现菜单的显示
{
  var menub1 = document.all['MENU' + this.id + 'B1']
  var menub2 = document.all['MENU' + this.id + 'B2']

if (this.update)
  {
    menub2.innerHTML = this.getTable()
    this.update = false
  }

var menu = document.all['MENU' + this.id]

menub1.style.top = this.top
  menub1.style.left = this.left

menub2.style.width = menu.offsetWidth + 2
  menub2.style.height = menu.offsetHeight + 2
  menub1.style.width = menu.offsetWidth + 4
  menub1.style.height = menu.offsetHeight + 12
  
  //处理在窗口边缘单击鼠标时,菜单显示的位置
  
  // 菜单超出窗口底边时,上移
    if ((menub1.offsetTop + menub1.offsetHeight) > (MenuBodyRef.offsetHeight - 4))
    menub1.style.top = MenuBodyRef.offsetHeight - menub1.offsetHeight - 4

// 菜单超出窗口右边时,左移
  if ((menub1.offsetLeft + menub1.offsetWidth) > (MenuBodyRef.offsetWidth - 24))
    menub1.style.left = MenuBodyRef.offsetWidth - menub1.offsetWidth - 24

// 菜单超出窗口顶边时,下移
  if (menub1.offsetTop < 0)
    menub1.style.top = 0

// 菜单超出窗口左边时,右移
  if (menub1.offsetLeft < 0)
    menub1.style.left = 0

if (noDisplay) 
  {
    menub1.style.top = -1000
    menub1.style.left = -1000
  } else {
    menub1.style.visibility = 'visible'
  }
}

function MenuHide()  //实现菜单的隐藏
{ 
  var menub1 = document.all['MENU' + this.id + 'B1']
  if (this.submenu != null) this.submenu.hide()
  menub1.style.visibility = 'hidden'
  menub1.style.top = -1000
  menub1.style.left = -1000
}

function MenuBorders()  //响应鼠标的onclick事件
{
  return  "<div id=MENU" + this.id +"B1 class=menuBorder1 menuid=" + this.id + "

onClick='window.event.cancelBubble = true'>\n" +
          "  <div id=MENU" + this.id +"B2 class=menuBorder2 menuid=" + this.id + ">\n" +
          "  </div>\n" +
          "</div>\n";
}

function MenuTable()     //创建用于装菜单内容的表格,便于菜单界面的排版
{
  var str
  str = "<table id=MENU" + this.id + "\n" +
        "       cellpadding=0 cellspacing=0 border=0 class=menuTable>\n"
  for (var i=0; i < this.items.length; i++)
    str += this.items[i];
  str += "</table>\n"
  return str
}
Menu.prototype.addItem = MenuAddItem;
Menu.prototype.borders = MenuBorders;
Menu.prototype.getTable = MenuTable;
Menu.prototype.show = MenuShow;
Menu.prototype.hide = MenuHide;

var MenuBodyRef;
function MenuInit() //创建菜单所在的层,达到显示和隐藏的效果
{
  for(var i in document.all){
    if (document.all[i].tagName == 'BODY')
    {
      MenuBodyRef = document.all[i]
      MenuBodyRef.insertAdjacentHTML('AfterBegin', '<div id=MENUINSERT></div>')
      break
    }
  }
}
var mainMenu = null;
function DocOnLoad()  //在此添加菜单内容.
{
  var submenu
  MenuInit();
  mainMenu = new Menu(100, 20);
  submenu = new Menu(0,0)
  submenu.addItem(new MenuItem('流行歌曲', '#'))
  submenu.addItem(new MenuItem('民族风采', '#'))
  submenu.addItem(new MenuItem('乐曲欣赏', '#'))
  submenu.addItem(new MenuItem('交响乐', '#'))
  submenu.show(true)
  mainMenu.addItem(new MenuItem('音乐空间', null, null, submenu, null))

submenu = new Menu(0,0)
  submenu.addItem(new MenuItem('杂家杂文', '#'))
  submenu.addItem(new MenuItem('宏篇巨著', '#'))
  submenu.addItem(new MenuItem('诗词歌赋', '#'))
  submenu.show(true)
  mainMenu.addItem(new MenuItem('文学殿堂', null, null, submenu, null))

mainMenu.addItem(new MenuItem('软件下载', '#'))
  mainMenu.addItem(new MenuItem('在线游戏', '#'))

submenu = new Menu(0,0)
  submenu.addItem(new MenuItem('网上定购', '#'))
  submenu.addItem(new MenuItem('家居房产', '#'))
  submenu.addItem(new MenuItem('股票交易', '#'))
  submenu.show(true)
  mainMenu.addItem(new MenuItem('社区服务', '#', null, submenu))
  
  mainMenu.addItem(new MenuItem('聊天室', '#'))
  mainMenu.addItem(new MenuItem('收藏', 'h#'))

mainMenu.addItem(new MenuItem(null, null, null, null, true))

mainMenu.addItem(new MenuItem('收索', '#', 'find.gif'))
  mainMenu.addItem(new MenuItem('离开', new Function('DocOnClick()'), 'x.gif'))
  mainMenu.show(true)
} 
var flag = false
function DocOnClick() //菜单隐藏和显现
{
  if (flag) {
    mainMenu.hide()
  } else {
    mainMenu.left = window.event.x
    mainMenu.top = window.event.y
    mainMenu.show()
  }
  flag = ! flag
}
</Script>

第二步：把“onLoad="DocOnLoad()" onClick="DocOnClick()"”加在<body>标记里
例如：<body onLoad="DocOnLoad()" onClick="DocOnClick()">

特别说明：如网页特效代码中有引用图片文件等，请自己下载到本地调试！

[] [返回] [打印] [收藏] [评论]

上一篇代码：点击logo后出现隐藏的菜单

下一篇代码：菜单平时隐藏着，鼠标移到特定地方就会显现 (像oicq)

一个非常不错的左键弹出菜单。就象WINDOW的右键属性。。

精品推荐

代码分类

阅读排行

相关代码