`
niunan
  • 浏览: 721168 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

jQuery实战(三)

阅读更多
刚刚看完第三讲,是用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
分享到:
评论
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毫秒以上,这时下拉菜单才会展开!

相关推荐

    《JavaScript和jQuery实战手册 原书第3版》PDF

    《JavaScript和jQuery实战手册 原书第3版》是一本深入浅出的编程指南,专为想要掌握JavaScript和jQuery的开发者所设计。这本书详细介绍了这两种技术的核心概念、语法以及在实际开发中的应用,旨在帮助读者提升Web...

    JQuery实战(中文版)+源码

    JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码...

    《JavaScript和jQuery实战手册》PDF

    《JavaScript和jQuery实战手册》是一本深入探讨JavaScript和jQuery编程技术的专业书籍,旨在帮助读者掌握这两门重要技术,提升Web开发能力。JavaScript是互联网上最广泛使用的脚本语言,而jQuery则是JavaScript的一...

    JavaScript和jquery实战手册

    在实战中,学习如何将JavaScript和jQuery结合,可以创建出高效、用户友好的Web应用。例如,通过JavaScript进行前端验证,确保用户输入的数据符合规范;使用jQuery简化DOM操作,提高代码可读性和效率;利用Ajax实现无...

    [jQuery实战第二版].pdf

    ### jQuery实战第二版知识点概述 #### 一、书籍基本信息与评价 - **书籍名称**:《jQuery实战第二版》(jQuery in Action, Second Edition) - **作者**:Bear Bibeault 和 Yehuda Katz - **出版商**:MANNING - **...

    JavaScript和jQuery实战手册原书第2版

    JavaScript和jQuery实战手册原书第2版.mobi,完美版本,亚马逊上自费下载的电子版。

    王兴魁jQuery实战系列视频

    教程名称:王兴魁jQuery实战系列视频课程目录:【】CSDN ITCAST王兴魁jQuery参考代码及PDF课件【】JQuery实战第一讲:概述、环境准备及入门实例【】JQuery实战第三讲:横向纵向菜单【】JQuery实战第二讲:可以编辑的...

    JQuery实战案例

    几个jquery的使用案例 JQuery实战第一讲:概述、环境准备及入门实例 ...JQuery实战第三讲:横向纵向菜单 JQuery实战第四讲:标签页效果 JQuery实战第五讲:级联下拉框效果 JQuery实战第六讲:窗口效果

    jQuery实战.pdf

    #### 三、jQuery实战技巧 1. **选择器优化**: - 使用更具体的选择器,减少不必要的遍历。 - 避免使用过于复杂的查询表达式。 2. **DOM操作优化**: - 尽量减少DOM操作次数,避免频繁修改DOM。 - 使用`clone()...

    jQuery实战(jQuery in Action) 中文版 PDF (4/6)

    jQuery实战(jQuery in Action) 中文版 PDF 人民邮电出版社 Part 4 of 6

    jQuery实战中文版.pdf

    #### 三、jQuery实战应用 - **基础用法**: - 加载jQuery库; - 使用`$(document).ready()`确保文档加载完成后执行脚本。 - **示例代码**: ```javascript $(document).ready(function(){ $("button").click...

    jQuery实战 源代码

    《jQuery实战 源代码》是一本专注于讲解jQuery库实际应用和源码解析的专业书籍。jQuery作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务,使得JavaScript编程变得更加...

    JQuery实战视频教程源码及PPT

    《JQuery实战》视频教程源码及PPT是一套针对前端开发者精心编排的课程资源,旨在深入浅出地教授如何高效使用JQuery这一强大的JavaScript库。本教程通过丰富的实例和PPT讲解,帮助学习者从基础到进阶,全面掌握JQuery...

    jquery实战高清pdf 附源码

    《jQuery实战高清PDF》是一本深入浅出的jQuery学习指南,专为对JavaScript库jQuery感兴趣的读者精心打造。这本书不仅提供了详尽的理论知识,还配备了实际的源代码,让读者能够在实践中更好地理解和掌握jQuery的强大...

    jQuery实战中文版

    《jQuery实战中文版》这本书是面向开发者的一本深入学习jQuery的实用指南,旨在帮助读者熟练掌握这个广泛使用的JavaScript库,从而提升网页开发的效率和效果。jQuery是一个轻量级、高性能的JavaScript框架,它简化了...

    《 jQuery实战.pdf》高清下载

    从给定文件信息来看,此内容主要与“jQuery实战.pdf”的下载相关,它提及的标签是“jQuery”。由于描述中并没有提供具体的PDF文件内容,我无法直接从描述中提炼知识点。不过,我可以根据文件的标题和描述中提及的...

    《jQuery实战》 第二版.rar

    有了jQuery和这《jQuery实战》,你不需要再费心劳力地纠缠于各种高深复杂的javascript技巧,只需要使用层迭样式表、XHTML以及普通的javascript知识,就能直接操作页面元素,实现更快速更高效的Web开发。

    jQuery实战(一)

    《jQuery实战(一)》这篇文章将引导我们深入理解并运用jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画制作和Ajax交互,是前端开发中的重要工具。在本文中,我们将探讨jQuery的基本概念、...

    jQuery实战 第3版.pdf

    《jQuery实战 第3版.pdf》jquery讲解已经更新到jquery3.

Global site tag (gtag.js) - Google Analytics