jQuery实战（三）

niunan

浏览: 700012 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery Chrome Opera CSS HTML

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

3.menu.rar (31.9 KB)
描述: 源码
下载次数: 98

分享到：

精通Java Web动态图表编程(PDF) | 只能输入数字的文本框(兼容ie6,7,8,opera, ...

2008-11-16 15:37
浏览 2036
评论(3)
查看更多

3 楼 asd300 2009-01-14

31行 .main li, .hmain li{
32行 padding: 3px 0
33行 }

2 楼 asd300 2009-01-14

修正纵向菜单的二级菜单在IE6中变长的问题

31行 .main li, .hmain li{
32行 padding: 3px 0[color=red][/color];
33行 }

1 楼 niunan 2008-11-18

以上代码有个问题,就是在横向菜单处,如果不停的用鼠标在各个菜单上滑动,那下拉菜单就会一进一出的,煞是好看,在这里有可能有时候是用户无意中滑动的,所以我们在这里就得做个延迟处理,JS代码如下:

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

    // 针对横向菜单，需要在鼠标移上时显示，移除时隐藏
    $(".hmain").hover(function() {
        var ulNode = $(this).children("ul");
        timeoutid = setTimeout(function() {    // 延迟处理
            ulNode.slideDown("slow");
        }, 300);
    }, function() {
        $(this).children("ul").slideUp("slow");
        clearTimeout(timeoutid);
    });
});

在这里用到了JS的内置函数setTimeout来进行延迟处理,如果用户在某个菜单上停上300毫秒以上,这时下拉菜单才会展开!

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论