jQuery下拉菜单实战-CSDN博客

本文介绍如何使用jQuery创建纵向和横向的下拉菜单，并提供完整的HTML、CSS和JavaScript代码示例。通过简单的slideToggle和hover效果实现交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚看完第三讲，是用jQuery制作下拉菜单，自己也试着做了一个，只是没有用到图片之类的，呵呵，所以比较难看，也比较简单。
因为我是用VS做的，所以HTML界面顶上都会有<%%>的内容的，大家换成静态页的时候把上面的去掉就成！
menu.aspx源码


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %>

<!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 runat="server">
    <title>jQuery实战-下拉菜单</title>
    <link href="css/menu.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
</head>
<body>
<h4>纵向菜单</h4>
    <ul>
        <li class="main"><a href="#" class="first">菜单一</a>
            <ul>
                <li><a href="#">菜单11</a></li>
                <li><a href="#">菜单12</a></li>
            </ul>
        </li>
        <li class="main"><a href="#" class="first">菜单二</a>
            <ul>
                <li><a href="#">菜单21</a></li>
                <li><a href="#">菜单22</a></li>
            </ul>
        </li>
        <li class="main"><a href="#" class="first">菜单三</a>
            <ul>
                <li><a href="#">菜单31</a></li>
                <li><a href="#">菜单32</a></li>
            </ul>
        </li>
    </ul>
    <br />
    <br />
    <br />
    <h4>横向菜单</h4>
    <ul>
        <li class="hmain"><a href="#" class="first">菜单一</a>
            <ul>
                <li><a href="#">菜单11</a></li>
                <li><a href="#">菜单12</a></li>
            </ul>
        </li>
        <li class="hmain"><a href="#" class="first">菜单二</a>
            <ul>
                <li><a href="#">菜单21</a></li>
                <li><a href="#">菜单22</a></li>
            </ul>
        </li>
        <li class="hmain"><a href="#" class="first">菜单三</a>
            <ul>
                <li><a href="#">菜单31</a></li>
                <li><a href="#">菜单32</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

menu.css源码：


a:link, a:visited {  /* 设置默认及访问过的超链接样式 */
    text-decoration: none;
    text-align: center;
    color: #000;
    display: block;
    display: inline-block;
    width: 120px;
    height: 20px;   
    line-height: 20px; 
}
ul {  /* 设置UL样式，去掉小圆点，让二级菜单与一级菜单之间没有缩进 */
    list-style: none;
    margin: 0;
    padding: 0;
}
.main {
    margin-bottom: 1px;
}
.main, hmain { /* 菜单的样式 */
    width: 120px;
}
.main a.first, .hmain a.first{  /* 设置一级菜单的样式 */
    background-color: #000;
    color: #fff;
}
.main ul , .hmain ul{ /* 设置二级菜单的样式 */
    background-color: #eee;
    display: none;
    width: 120px;
}
.main li, .hmain li{
    padding: 3px;    
}
.hmain {
    float: left;
    margin-right: 1px;
}

menu.js源码：


$(function() {
    // 针对纵向菜单，只要点击后显示或隐藏即可
    $(".main > a").click(function() {
        var ulNode = $(this).next("ul");
        ulNode.slideToggle("slow");
    });

    // 针对横向菜单，需要在鼠标移上时显示，移除时隐藏
    $(".hmain").hover(function() {
        $(this).children("ul").slideDown("slow");
    }, function() {
        $(this).children("ul").slideUp("slow");
    });
});