Dreamweaver教程 FrontPage教程 Flash教程 CSS教程
  • javascript教程
  • 当前位置:教程 > 网页制作 > javascript教程 > 正文

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

    编辑:教程网 来源:网络 时间:2011年09月27日 16:46

    这是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://www.websmill.com/wangye/javascript/25529.html

  • 上一篇:按比例微缩图片的一段小小的JS代码
  • 下一篇:来自Google的密码强度Javascript验证代码