2000年08月07日15:18


制作更方便的下拉菜单
雷子

    由于JavaScript和VBScript脚本语言及CSS的日益流行,Interent上各大网站纷纷采用这些技术,使自己的站点变得更加活跃,更具交互性和趣味性。尤其是微软主页上的那种下拉菜单,曾经让我感到不可思议,简单的网页竟能呈现出类似应用程序般的界面,让我羡慕不已。经过研究,我发现此类菜单的编制并不复杂,下面,我就把我编制的下拉菜单介绍给大家。 

  首先,我们先要定义几个类(仔细看哟,这里可是影响外观效果的关键部位): 

  〈STYLE〉               

  .over{background-color:#cccccc; 

  //这里定义菜单项鼠标OVER时的效果; 

  border-top:#ffffff 1px solid;   //上边的属性 

  border-bottom:#000000 1px solid;//下边的属性 

  border-left:#ffffff 1px solid;   //左边的属性 

  border-right:#000000 1px solid} //右边的属性 

  .out{background-color:#cccccc;       

   //这里定义菜单项一般状态; 

   border-top:#cccccc 1px solid; 

     border-bottom:#cccccc 1px solid; 

     border-left:#cccccc 1px solid; 

     border-right:#cccccc 1px solid} 

  .down{background-color:#cccccc;       

  //这里定义菜单项鼠标左键点击时的效果; 

     border-top:#000000 1px solid; 

     border-bottom:#ffffff 1px solid; 

     border-left:#000000 1px solid; 

     border-right:#ffffff 1px solid} 

  .subover{background-color:#003090;color:#ffffff} 

  //这里定义子菜单鼠标OVER时的效果; 

  .subout{background-color:#cccccc}     

  //这里定义子菜单一般状态; 

  〈/STYLE〉 

  //请把以上代码加到〈HEAD〉〈/HEAD〉里面。 

  定义完CSS风格,下面我们把它和HTML合并到一起: 

  〈table width=″100%″ border=″0″ cellspacing=″0″ cellpadding=″0″ align=″center″ class=″over″ height=″22″〉〈tr〉 

  〈td width=″9%″ height=″19″〉 

  〈table id=″bar0″ //定义“文件”菜单项的ID; 

  onmousedown=″mydown(′bar0′);″   

   //定义“文件”菜单项的鼠标事件; 

     onMouseOver=″myover(′bar0′);″ 

     onMouseOut=″myout(′bar0′);″ 

     onclick=″myclick(′bar0′);″ 

     class=″out″ //定义“文件”菜单项的类; 

     width=″100%″ border=″0″ cellspacing=″0″ cellpadding=″0″ bgcolor=″#cccccc″〉〈tr〉〈td colspan=″2″ height=″19″〉〈div align=″center″〉文件〈/div〉〈/td〉〈/tr〉〈/table〉 

   //“文件”菜单项定义结束; 

  〈/td〉 

  〈td width=″9%″ height=″19″〉//定义第二个菜单项; 

  〈table id=″bar1″ onmousedown=″mydown(′bar1′);″ class=″out″ 

  width=″100%″ border=″0″ cellspacing=″0″ 

  cellpadding=″0″ bgcolor=″#cccccc″ 

  onMouseOver=″myover(′bar1′);″ 

  onMouseOut=″myout(′bar1′);″ 

  onclick=″myclick(′bar1′);″〉 

  〈tr〉〈td colspan=″2″ height=″19″〉〈div align=″center″〉编辑〈/div〉〈/td〉〈/tr〉 

  〈/table〉  //第二个菜单项定义结束; 

  〈/td〉   //定义第N个菜单项,方法同上; 

  〈/tr〉 

  〈/table〉 

  下面是子菜单的定义; 

  〈div id=″menu0″ //定义子菜单1的位置并隐藏; 

  style=″POSITION: absolute;LEFT: 6px; TOP: 22px; Z-INDEX: 12; 

  width: 100px; height: 50px;display:none″〉 

  〈table class=″over″ width=″100%″ border=″0″〉〈tr〉 

  〈td id=″00″ onmouseover=″myover(′00′);″ 

        onmouseout=″myout(′00′);″ 

       onclick=″myclick(′想打开的文件0.htm′);″〉 菜单项00〈/td〉 

  〈/tr〉〈tr〉 

  〈td id=″01″ onmouseover=″myover(′01′);″ 

        onmouseout=″myout(′01′);″ 

       onclick=″myclick(′想打开的文件1.htm');″〉 菜单项01〈/td〉 

  〈/tr〉〈/table〉 

  〈/div〉 

  〈div id=″menu1″ //定义子菜单2的位置并隐藏; 

  style=″POSITION: absolute;LEFT: 66px; TOP: 22px; Z-INDEX: 12; 

  width: 100px; height: 50px;display:none″〉 

  〈table class=″over″ width=″100%″ border=″0″〉〈tr〉 

  〈td id=″10″ onmouseover=″myover(′10′);″ 

        onmouseout=″myout(′10′);″ 

        onclick=″myclick(′想打开的文件2.htm′);″〉 菜单项10〈/td〉 

  〈/tr〉〈tr〉 

  〈td id=″11″ onmouseover=″myover(′11′);″ 

        onmouseout=″myout(′11′);″ 

        onclick=″myclick(′想打开的文件3.htm′);″〉 菜单项11〈/td〉 

  〈/tr〉 

  〈/table〉 

  〈/div〉 

  哇!HTML代码也编写完了,把它们添加到你的〈BODY〉〈/BODY〉中吧,现在,我们将进行代码的核心部分: 

  “脚本”的编制! 

  〈SCRIPT〉 

  function myover(tt)         

   //菜单项及子菜单的鼠标OVER例程; 

  {  cc=document.all(tt); 

     if(!tt.indexOf(′bar′)) 

     { cc.className=″over″; 

     } 

     else{cc.className=″subover″;} 

     event.srcElement.style.cursor = ″default″; 

  } 

  function myout(tt){ 

   //菜单项及子菜单的鼠标OUT例程; 

      cc=document.all(tt); 

   if(tt.indexOf(′bar′)==″0″) 

      { cc.className=″out″; 

   } 

      else{cc.className=″subout″;} 

   event.srcElement.style.cursor = ″auto″; 

  } 

  function mydown(tt){ //菜单项的鼠标DOWN例程; 

      cc=document.all(tt); 

      cc.className=″down″; 

  } 

  function myclick(tt)         

   //菜单项及子菜单的鼠标CLICK例程; 

  { if(tt.indexOf(′bar′)==″0″) 

   { hideall(); 

  var src=document.all(tt); 

  if(src.id==″bar0″) menu0.style.display=″ ″; 

  else if(src.id==″bar1″) 

  menu1.style.display=″″; 

  else if(src.id==″bar2″) 

  menu2.style.display=″ ″; 

  else if(src.id==″bar3″) 

  menu3.style.display=″ ″; 

   } 

   else{location.href=tt;} 

   window.event.cancelBubble=true;   

   //终结本事件冒泡 

  } 

  function hideall() 

  { 

    menu0.style.display=″none″; 

    menu1.style.display=″none″; 

    menu2.style.display=″none″; 

    menu3.style.display=″none″; 

  } 

  function renclick(){ 

    hideall();     //隐藏所有菜单 

  } 

  document.onmouseup=renclick; 

  〈/SCRIPT〉 

  把上面的脚本添加到你的页面的〈HEAD〉〈/HEAD〉中。 

    好了!大功告成!现在,试着运行你的新页面,看看怎么样?是不是比微软站的那个还COOL?哈!

来源:赛迪网
软件学园

字号 】 【关闭窗口
打印版 察看感言 Email推荐

热门评论文章

请 注 意
  1. 遵守中华人民共和国有关法律、法规,尊重网上道德,承担一切因您的行为而直接或间接引起的法律责任。
  2. 人民网拥有管理笔名和留言的一切权力。
  3. 您在人民网留言板发表的言论,人民网有权在网站内转载或引用。
  4. 如您对管理有意见请向留言板管理员人民日报网络中心反映。
关键词:



镜像:日本 教育网 科技网
E_mail:info@peopledaily.com.cn 新闻线索:rm@peopledaily.com.cn

人民日报简介 | 关于人民网 | 网站地图 | 在线帮助 | 广告服务 | 合作加盟 | 网站声明 | 联系我们 | ENGLISH  京ICP证000006号
人 民 网 版 权 所 有 ,未 经 书 面 授 权 禁 止 使 用
Copyright © 2002 by www.people.com.cn. all rights reserved