经验技巧

网页中单击鼠标右键弹出导航菜单

    这是一个“单击鼠标右键弹出导航菜单”的演示页面，请将鼠标指针移到页面中单击右键观看效果。

    制作方法：

    第一步
    写2个文件: click_menu.css 和 click_menu.js

    click_menu.css 文件内容如下：


  .skin0{position:absolute;
  width:150px;
  border:2px solid black;
  background-color:menu;font-family:Verdana;
  line-height:30px;
  cursor:default;
  visibility:hidden;
  }
  .skin1{cursor: default;
  font: menutext;
  position: absolute;
  width: 165px;
  background-color: menu;
  border: 1 solid buttonface;
  visibility:hidden;
  border: 2 outset buttonhighlight;
  }
  .menuitems{padding-left:15px;padding-right:10px;}

click_menu.js 文件内容如下：


  var menuskin=1 
  var display_url=0
  document.write('<div id="ie5menu" class="skin1" 
onMouseover="highlightie5()" onMouseout="lowlightie5()" 
onClick="jumptoie5()">');
  document.write('<div class="menuitems" 
url="javascript:history.go(-1);">后退</div>');
  document.write('<div class="menuitems" 
url="javascript:history.go(1);"> 前进</div>');
  document.write('<hr size="1">');
  document.write('<div class="menuitems" 
url="javascript:this.location.reload();">刷新</div>');
  document.write('<hr size="1">');
  document.write('<div class="menuitems" 
url="javascript:self.print();">打印</div>');
  document.write('<hr size="1">');
  document.write('<div class="menuitems" 
url="http://tj123.jxxk.com" target="_blank">我的首页</div>');
  document.write('<div class="menuitems" 
url="http://tj123.jxxk.com/lyb/index.asp">给我留言</div>');
  document.write('<div class="menuitems" 
url="mailto:sdtjyzz@sohu.com">发信给我</div>');
  document.write('</div>');

  if (document.all&&window.print){
  if (menuskin==0)
  ie5menu.className="skin0"
  else
  ie5menu.className="skin1"
  document.oncontextmenu=showmenuie5
  document.body.onclick=hidemenuie5
  }

  function showmenuie5(){
  var rightedge=document.body.clientWidth-event.clientX
  var bottomedge=document.body.clientHeight-event.clientY


  if (rightedge<ie5menu.offsetWidth) 
  ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
  else
  ie5menu.style.left=document.body.scrollLeft+event.clientX


  if (bottomedge<ie5menu.offsetHeight)
  ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
  else
  ie5menu.style.top=document.body.scrollTop+event.clientY


  ie5menu.style.visibility="visible"
  return false
  }

  function hidemenuie5(){
  ie5menu.style.visibility="hidden"
  }

  function highlightie5(){
  if (event.srcElement.className=="menuitems"){
  event.srcElement.style.backgroundColor="highlight"
  event.srcElement.style.color="white"
  if (display_url==1)
  window.status=event.srcElement.url
  }
  }

  function lowlightie5(){
  if (event.srcElement.className=="menuitems"){
  event.srcElement.style.backgroundColor=""
  event.srcElement.style.color="black"
  window.status=''
  }
  }

  function jumptoie5(){
  if (event.srcElement.className=="menuitems"){
  if (event.srcElement.getAttribute("target")!=null)
  window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
  else
  window.location=event.srcElement.url
  }
  }

第二步：在您网页的<body>后加：


  <link rel="stylesheet" type="text/css" href="click_menu.css"> 
  <script language="javascript" src="click_menu.js"></script>