首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery菜单效果的两个实例讲解（3）

Posted in Javascript onSeptember 17, 2015

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

JQuery菜单效果的两个实例讲解（3）

当单击菜单项的时候，可以实现菜单的折叠与展开，这是我们在网页上经常看到的一个效果。在这里的实现主要应用是CSS控制样式然后配合jquery实现。
自己的感想：这里比如说绑定要跳转的页面，只是静态的绑定，不能动态的绑定，我在开发过程中用到的动态绑定是结合asp.net的treeview控件实现的。不知道大家还有没有更好的办法。
前台页面代码：

<%@ 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></title> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/menu.js" type="text/javascript"></script> 
 <link href="css/menu.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
  <ul> 
   <li class="main"> 
    <a href="#">菜单项1</a> 
    <ul> 
     <li><a href="#">子菜单11</a></li> 
     <li><a href="#">子菜单12</a></li>      
    </ul>    
   </li> 
   <li class="main"> 
    <a href="#">菜单项2</a> 
    <ul> 
     <li><a href="#">子菜单21</a></li> 
     <li><a href="#">子菜单22</a></li> 
    </ul> 
   </li> 
   <li class="main"> 
    <a href="#">菜单项3</a> 
    <ul> 
     <li><a href="#">子菜单31</a></li> 
     <li><a href="#">子菜单32</a></li> 
    </ul> 
   </li> 
  </ul> 
 </div> 
 </form> 
</body> 
</html>

CSS（menu.css）

ul,li 
{ 
 list-style-type:none; 
 /*如果不加margin在搜狗浏览器中不能左对齐*/ 
 margin:0px;  
 padding:0px; 
 } 
.main 
{ 
 background-image: url("../images/title.gif"); 
 background-repeat:repeat-x; 
 width:100px; 
 } 
.main 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 
{ 
 color:Black; 
 background-image:none; 
 }

menu.js:

/// <reference path="jquery-1.9.1.min.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"); 
 }); 
});

这个例子是上一个例子的延续，我们先来看一下最终我们要达到的效果：

JQuery菜单效果的两个实例讲解（3）

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

<%@ 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></title> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/menu.js" type="text/javascript"></script> 
 <link href="css/menu.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
  <ul> 
   <li class="main"> 
    <a href="#">菜单项1</a> 
    <ul> 
     <li><a href="#">子菜单11</a></li> 
     <li><a href="#">子菜单12</a></li>      
    </ul>    
   </li> 
   <li class="main"> 
    <a href="#">菜单项2</a> 
    <ul> 
     <li><a href="#">子菜单21</a></li> 
     <li><a href="#">子菜单22</a></li> 
    </ul> 
   </li> 
   <li class="main"> 
    <a href="#">菜单项3</a> 
    <ul> 
     <li><a href="#">子菜单31</a></li> 
     <li><a href="#">子菜单32</a></li> 
    </ul> 
   </li> 
  </ul> 
 </div> 
 
 <div style=" margin-top:50px;"> 
  <ul> 
   <li class="hmain"> 
    <a href="#">菜单项1</a> 
    <ul> 
     <li><a href="#">子菜单11</a></li> 
     <li><a href="#">子菜单12</a></li>      
    </ul>    
   </li> 
   <li class="hmain"> 
    <a href="#">菜单项2</a> 
    <ul> 
     <li><a href="#">子菜单21</a></li> 
     <li><a href="#">子菜单22</a></li> 
    </ul> 
   </li> 
   <li class="hmain"> 
    <a href="#">菜单项3</a> 
    <ul> 
     <li><a href="#">子菜单31</a></li> 
     <li><a href="#">子菜单32</a></li> 
    </ul> 
   </li> 
  </ul> 
 </div> 
 </form> 
</body> 
</html>

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

/// <reference path="jquery-1.9.1.min.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菜单效果的两个实例讲解（3）

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
redux处理异步action解决方案
Mar 22 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
jQuery实现可编辑的表格实例讲解（2）
Sep 17 #Javascript
JQuery入门基础小实例(1)
Sep 17 #Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 #Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 #Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 #Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 #Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 #Javascript
结构体(1) 微信小程序(9) Pillow(2) 指针(1) map(4) bufio(1) vue-esign(1) WeUI(1) pdfkit(1) 蒙特卡罗(1)
You might like
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
jQuery)扩展jQuery系列之一 模拟alert，confirm（一）
2010/12/04 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python 实现性别识别
2020/11/21 Python
laravel使用redis队列实例讲解
2021/03/23 PHP
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
委托书格式要求
2015/01/28 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
英语读书笔记
2015/07/02 职场文书
关于幸福的感言
2015/08/03 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
公司年会主持词范文！
2019/05/07 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android