首页
所有分类
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中的对象和数组的应用技巧
Jan 07 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
canvas学习之API整理笔记（一）
Dec 29 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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) 艾尔登法环(1) 暴雪(1) 小缇娜的奇幻之地(1) 帝国时代(1) 我的世界(1) Docker(14) 巫师(1) 最终幻想(1) explain(2)
You might like
php 8小时时间差的解决方法小结
2009/12/22 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
js资料toString 方法
2007/03/13 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
webpack多页面开发实践
2017/12/18 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
浅析python，PyCharm，Anaconda三者之间的关系
2019/11/27 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
澳大利亚第一旅行车和房车配件店：Caravan RV Camping
2020/12/26 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)？
2012/06/20 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
工业设计专业推荐信
2013/10/29 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
幼儿园新年寄语
2014/04/03 职场文书
学校课外活动总结
2014/05/08 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
教师学期个人总结
2015/02/11 职场文书
公司出纳岗位职责
2015/03/31 职场文书
初中运动会前导词
2015/07/20 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL