jQuery

JQuery菜单效果实例详解

时间:2024-06-09 19:22:36 jQuery 我要投稿
  • 相关推荐

JQuery菜单效果实例详解

  最终要达到的效果是如图所示:

  当单击菜单项的时候,可以实现菜单的折叠与展开,这是我们在网页上经常看到的一个效果。在这里的实现主要应用是CSS控制样式然后配合jquery实现。

  自己的感想:这里比如说绑定要跳转的页面,只是静态的绑定,不能动态的绑定,我在开发过程中用到的动态绑定是结合asp.net的treeview控件实现的。不知道大家还有没有更好的办法。

  前台页面代码:

  <%@ page="" language="C#" autoeventwireup="true" codefile="menu.aspx.cs" inherits="menu">

  这次我们要实现的是下面的效果,当鼠标滑动到菜单项的时候,子菜单显示;当鼠标移开的时候,菜单收起。在这里,我们还解决了在滑动门会有的问题,就是当鼠标快速滑动的时候,会不停地触发,这个问题。页面的代码如下:

  菜单项1

  子菜单11

  子菜单12

  菜单项2

  子菜单21

  子菜单22

  菜单项3

  子菜单31

  子菜单32

  菜单项1

  子菜单11

  子菜单12

  菜单项2

  子菜单21

  子菜单22

  菜单项3

  子菜单31

  子菜单32

  CSS(menu.css)ul,li { list-style-type:none; /*如果不加margin在搜狗浏览器中不能左对齐*/ margin:0px; padding:0px; } .main,.hmain { background-image: url("../images/title.gif"); background-repeat:repeat-x; width:100px; } .main a,.hmain a { background-image:url("../images/collapsed.gif"); background-repeat:no-repeat; background-position:3px center; text-decoration:none; color:White; /*下面是用来保证鼠标只要停留在li上就可以响应,也就相当于让li的响应区域扩充了*/ display:block; padding-left:20px; padding-bottom:3px; } li { background-color:#EEEEEE; } .main li a,.hmain li a { color:Black; background-image:none; } .main ul,.hmain ul { display:none; } /*横向菜单的样式*/ .hmain { float:left; } menu.js///

  $(document).ready(function () { var main = $(".main>a"); main.click(function () { var ulNode = $(this).next("ul"); // if (ulNode.css("display") == "none") { // ulNode.css("display", "block"); // } // else { // ulNode.css("display", "none"); // } //百叶窗的效果 ulNode.slideToggle("normal"); }); //现在的这个变量用来解决鼠标快速滑动问题clearInterval(setTimeoutId); nodeLi.children("ul").slideUp(); var setTimeoutId; $(".hmain").hover(function () { var nodeLi = $(this); setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300) }, //上面的函数是鼠标进入的操作,下面的操作是鼠标移出的操作。 function () { //开始的时候,我在这里犯了一个错误,应该重新定义一下nodeLi var nodeLi = $(this); clearTimeout(setTimeoutId); if (nodeLi.children("ul").length != 0) { nodeLi.children("ul").slideUp(); }; }); }); 以上两种菜单效果,大家有没有掌握,希望这篇文章可以帮助到大家。

【JQuery菜单效果实例详解】相关文章:

杭州的年夜饭菜单03-22

江西年夜饭菜单01-18

Word 2000“帮助”菜单使用方法03-19

again用法详解08-25

眼神礼仪的详解03-09

关于DNS的知识详解07-16

男士化妆步骤详解11-09

非洲航线知识详解11-03

茶叶采摘的方法详解05-17

山西年夜饭家常菜菜单及做法03-26