js 单击式的下拉菜单效果实例

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

  <title>js 单击式的下拉菜单效果</title>

  <style>

  .div1 { width: 120px; height: 20px; line-height:20px; text-align:center; }

  .div2 {width: 120px; position:absolute; left:0; top:10px;visibility:hidden; }

  .div2 a{ display:block;}

  </style>

  </head>

  <body>

  <script language="JavaScript">

  var zindex=100

  function dropit2(whichone){

  if (window.themenu&&themenu.id!=whichone.id)

  themenu.style.visibility="hidden"

  themenu=whichone

  if (document.all){

  themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX

  themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18

  if (themenu.style.visibility=="hidden"){

  themenu.style.visibility="visible"

  themenu.style.zIndex=zindex++}

  else{

  hidemenu()}}}

  function dropit(e,whichone){

  if (window.themenu&&themenu.id!=eval(whichone).id)

  themenu.visibility="hide"

  themenu=eval(whichone)

  if (themenu.visibility=="hide")

  themenu.visibility="show"

  else

  themenu.visibility="hide"

  themenu.zIndex++

  themenu.left=e.pageX-e.layerX

  themenu.top=e.pageY-e.layerY+19

  return false}

  function hidemenu(whichone){

  if (window.themenu)

  themenu.style.visibility="hidden"}

  function hidemenu2(){

  themenu.visibility="hide"}

  if (document.all)

  document.onclick=hidemenu

  </script>

  <span class="div1" onClick="dropit2(dropmenu);event.cancelBubble=true;return false"> <a href="###" onClick="if(document.layers) return dropit(event, 'document.dropmenu')">[点击显示菜单]</a> </span>

  <div class="div2" id="dropmenu">

  <a href="http://www.glzy8.com">管理资源吧</a>

  <a href="#">个性名字网</a>

  <a href="#">个性名字网</a>

  </div>

  </body>

  </html> </td>

  </tr>

  </table>