当前位置:编程学习 > JS >>

javascript完整的下拉菜单代码

这是我开发应用中用到一个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>
    <title>无标题页</title>
</head>
<body>
    <table width="258" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
            <td width="258" height="432" valign="top" background="images/left.jpg">
                <table width="258" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="26" valign="top" background="images/ss.jpg">
                            <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="13%" height="19">
                                         </td>
                                    <td width="87%" valign="bottom">
                                        <strong>产品类别</strong></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="82%" border="0" align="center" cellpadding="0" cellspacing="0">
                    <%-- /**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-   /**/--%>
                    <tr style="cursor: hand;" onclick="document.all.c1.style.display=(document.all.c1.style.display=='none')?'':'none'">
                        <td width="10%" align="center" valign="middle" class="border2">
                            <img src="images/biao.jpg" width="3" height="5" /></td>
                        <td width="90%" height="30" align="left" valign="middle" class="border2">
                            <strong>食品加工</strong></td>
                    </tr>
                    <tr id="c1" style="display: none; line-height: 24px;">
                        <td width="10%" align="center" valign="middle" class="border2">
                        </td>
                        <td width="90%" height="30" align="left" valign="middle">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 2px;">
                                <tr>
                                    <td>
                                        食品加工1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        食品加工2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        食品加工3
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <%-- /**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-   /**/--%>
                    <tr style="cursor: hand;" onclick="document.all.c2.style.display=(document.all.c2.style.display=='none')?'':'none'">
                        <td align="center" valign="middle" class="border2">
                            <img src="images/biao.jpg" width="3" height="5" /></td>
                        <td height="30" align="left" valign="middle" class="border2">
                            <strong>食品加工类</strong></td>
                    </tr>
                    <tr id="c2" style="display: none; line-height: 24px;">
                        <td width="10%" align="center" valign="middle" class="border2">
                        </td>
                        <td width="90%" height="30" align="left" valign="middle">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 2px;">
                                <tr>
                                    <td>
                                        食品加工类1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        食品加工类2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        食品加工类3
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <%-- /**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-   /**/--%>
                    <tr style="cursor: hand;" onclick="document.all.c3.style.display=(document.all.c3.style.display=='none')?'':'none'">
                        <td align="center" valign="middle" class="border2">
                            <img src="images/biao.jpg" width="3" height="5" /></td>
                        <td height="30" align="left" valign="middle" class="border2">
                            <strong>坚果加工类</strong></td>
                    </tr>
                    <tr id="c3" style="display: none; line-height: 24px;">
                        <td width="10%" align="center" valign="middle" class="border2">
                        </td>
                        <td width="90%" height="30" align="left" valign="middle">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 2px;">
                                <tr>
                                    <td>
                                        坚果加工类1 </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        坚果加工类2 </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        坚果加工类3 </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

补充:网页制作,js教程
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,