jQuery实战（三）

最新推荐文章于 2024-05-04 18:53:16 发布

learning_1

最新推荐文章于 2024-05-04 18:53:16 发布

阅读量81

点赞数

分类专栏： jQuery 文章标签： jQuery Chrome Opera CSS HTML ViewUI

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

刚刚看完第三讲，是用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");
    });
});

从JS代码可以看出，比较简单，主要就是一个slideToggle和hover的使用了。。。
下面附上的文件是从网上下载的，比较完整，还包括了图片的切换等。。
以上代码兼容：ie6,7,8,opera,ff,chrome

learning_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实战（三）

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

扫一扫

专栏目录