当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个很通用的javascript的下拉菜单

Javascript
jQuery chili图片远处放大插件
Aptana调试javascript图解教程
JS 动态获取节点代码innerHTML分析 [IE,FF]
jquery 分页控件实现代码
Ruffy javascript 学习笔记
JavaScript 学习笔记 Black.Caffeine 09.11.28
Jquery 快速构建可拖曳的购物车DragDrop
js 变量类型转换常用函数与代码[比较全]
JavaScript 直接操作本地文件的实现代码
兼容IE与Firefox的js 复制代码
让FireFox支持innerText的实现代码
js 表格隔行颜色
Jquery选择器 $实现原理
JS类的封装及实现代码
用Javascript检查Adobe PDF插件是否安装的实现代码
鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox
JavaScript Object的extend是一个常用的功能
JavaScript 报表展示实现代码
两种WEB下的模态对话框 (asp.net或js的分别实现)
checkbox全选/取消全选以及checkbox遍历jQuery实现代码

Javascript 中的 一个很通用的javascript的下拉菜单


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 119 ::
收藏到网摘: n/a

这是css文件css.css的内容

.close{
  visibility:hidden;
  cellPadding=0; cellSpacing=0 ;
  height:21px;font:9pt;text-align:center
  
   }
.open{
  visibility:visible;
  cellPadding=0; cellSpacing=0 ;
  height:24px;font:9pt;text-align:center;
  BORDER-TOP: #000000 1px solid;
  BORDER-BOTTOM: #000000 1px solid

   }
.openleft{
  visibility:visible;
  cellPadding=0; cellSpacing=0 ;
  height:24px;font:9pt;text-align:center;
  BORDER-TOP: #000000 1px solid;
  BORDER-LEFT:#000000 1px solid ;
  BORDER-BOTTOM: #000000 1px solid
  }
.openright{
  visibility:visible;
  cellPadding=0; cellSpacing=0 ;
  height:24px;font:9pt;text-align:center;
  BORDER-TOP: #000000 1px solid ;
  BORDER-RIGHT:#000000 1px solid ;
  BORDER-BOTTOM: #000000 1px solid
  }

利用鼠标对象和表格的属性很容易实现下拉菜单!

<HTML><HEAD><TITLE>最后还是笑笑/情感</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK href="CssFiles/css.css"  type=text/css rel=stylesheet>
<BODY bgColor=#dedfde leftMargin=0 marginwidth="0" topmargin="0">

<TABLE width="80%"  align="center" cellPadding=0 cellSpacing=0  id="thelast" class=bian>
  
    <TR  height="67">
   <TD valign="top" width="9%" align=center >
   <table width="100%" class=close  
     onMouseOut="this.style.visibility='hidden'";
     onMouseOver="this.style.visibility='visible'" cellpadding="0" cellspacing="0">
     <tr>
     <td valign="center" title="本人本站的介绍" background="pic/back.jpg" height=23 class=openleft><a href='#'> 笑 笑</a></td>
     </tr>
              <tr>
       <td valign="center" background="pic/back2.jpg"><a href="bzjs.html"  target="_blank">本 站</a></td>
     </tr>
     <tr>
       <td valign="center" background="pic/back2.jpg"><a href="grjj.html"  target="_blank">本 人</a></td>
     </tr>
     <tr>
       <td valign="center" background="pic/back2.jpg"><a href="jl.html"  target="_blank">简 历</a></td>
     </tr>    
     </table>

</TD></TR>

</TABLE>

</BODY>

</HTML>

具体的效果请看

http://kissan.533.net