JQuery菜单效果实例详解
最终要达到的效果是如图所示:
当单击菜单项的时候,可以实现菜单的折叠与展开,这是我们在网页上经常看到的一个效果。在这里的实现主要应用是CSS控制样式然后配合jquery实现。
自己的感想:这里比如说绑定要跳转的页面,只是静态的绑定,不能动态的绑定,我在开发过程中用到的动态绑定是结合的treeview控件实现的。不知道大家还有没有更好的办法。
前台页面代码:
<%@ page="" language="C#" autoeventwireup="true" codefile="" inherits="menu">
这次我们要实现的是下面的效果,当鼠标滑动到菜单项的时候,子菜单显示;当鼠标移开的时候,菜单收起。在这里,我们还解决了在滑动门会有的问题,就是当鼠标快速滑动的时候,会不停地触发,这个问题。页面的代码如下:
菜单项1
子菜单11
子菜单12
菜单项2
子菜单21
子菜单22
菜单项3
子菜单31
子菜单32
菜单项1
子菜单11
子菜单12
菜单项2
子菜单21
子菜单22
菜单项3
子菜单31
子菜单32
CSS()ul,li { list-style-type:none; /*如果不加margin在搜狗浏览器中不能左对齐*/ margin:0px; padding:0px; } ,n { background-image: url("../images/title.gif"); background-repeat:repeat-x; width:100px; } a,n 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; } li a,n li a { color:Black; background-image:none; } ul,n ul { display:none; } /*横向菜单的样式*/ n { float:left; } //
$(document)y(function () { var main = $(">a"); k(function () { var ulNode = $(this)("ul"); // if (("display") == "none") { // ("display", "block"); // } // else { // ("display", "none"); // } //百叶窗的效果 eToggle("normal"); }); //现在的这个变量用来解决鼠标快速滑动问题clearInterval(setTimeoutId); dren("ul")eUp(); var setTimeoutId; $("n")r(function () { var nodeLi = $(this); setTimeoutId = imeout(function () { dren("ul")eDown(); }, 300) }, //上面的函数是鼠标进入的操作,下面的操作是鼠标移出的操作。 function () { //开始的时候,我在这里犯了一个错误,应该重新定义一下nodeLi var nodeLi = $(this); clearTimeout(setTimeoutId); if (dren("ul")th != 0) { dren("ul")eUp(); }; }); }); 以上两种菜单效果,大家有没有掌握,希望这篇文章可以帮助到大家。
-
网页设计的布局
网页设计的工作目标,是通过使用更合理的颜色、字体、图片、样式进行页面设计美化,在功能限定的情况下,尽可能给予用户完美的视觉体验。以下是小编为您带来的网页设计的布局,看看吧!网页设计的布局11、响应式网页设计响应式网页设计是网页设计的一种技术,可在N多种浏...
-
万恶的function在javascript中的运用实例分析
javascript中最有特色而又让你困惑的function算一个了下面看一下常用操作复制代码代码如下:functiondoit(){.....}doit();javascript中的函数我们可以把它当作方法使用复制代码代码如下:varobj=newObject();=function(){.....}();而function实际上就是对象(即F...
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...
-
讲解HTML中iframe和frame的区别
不知道你在项目中用过frameset属性没有,frameset这个属性是在去年我在一个在线客服系统制作中用过,因为客服系统要有固定的布局,上面一块,下面一块等等,当时就是用的frameset和frame。在我用完了这些属性之后,我才明白了iframe和frame的`区别。因为在这之前,我项目中...