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(); 
   }; 
  }); 
});

以上两种菜单效果,大家有没有掌握,希望这篇文章可以帮助到大家。

Javascript 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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
You might like
php 在文件指定行插入数据的代码
2010/05/08 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
JS中的构造函数详细解析
2014/03/10 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python递归函数特点及原理解析
2020/03/04 Python
用python写爬虫简单吗
2020/07/28 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
理财投资建议书
2014/03/12 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
教师党员整改措施
2014/10/24 职场文书
教师求职简历自我评价
2015/03/10 职场文书
考博导师推荐信范文
2015/03/27 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书