首页
所有分类
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倒计时代码
Aug 12 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
js 数据类型判断的方法
Dec 03 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 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
NoSQL(1) 缓冲区(1) json_extract(1) ant design(2) 变量提升(1) JOIN(1) Launch Mode(1) form表单(1) netty(1) 弹窗(1)
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php统计数组元素个数的方法
2015/07/02 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP实现将上传图片自动缩放到指定分辨率，并保持清晰度封装类示例
2019/06/17 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
高中生自我鉴定范文
2013/10/30 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
python中urllib包的网络请求教程
2022/04/19 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技