首页
所有分类
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 相关文章推荐
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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
ICF-SW07(1) S700(1) S500(1) PL450(1) PL550(1) 低放电路(1) ICF-SW7600(1) H-501(1) BCL3000(2) PL990(2)
You might like
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
js函数的引用， 关于内存的开销
2012/09/17 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
详解Python中的元组与逻辑运算符
2015/10/13 Python
浅谈Django的缓存机制
2018/08/23 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python线性插值解析
2020/07/05 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
个人自我鉴定怎么写
2013/10/28 职场文书
中学生自我评价范文
2014/02/08 职场文书
民族学专业求职信
2014/07/28 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
团代会开幕词
2015/01/28 职场文书
高考学习决心书
2015/02/04 职场文书
2016党员入党决心书
2015/09/22 职场文书
蓝天保卫战收官在即 ：15行业将开展环保分级评价
2019/07/19 职场文书
解析：创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
星际争霸：毕姥爷vs解冻01
2022/04/01 星际争霸