欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery菜單效果的兩個實例講解(3)

 更新時間:2015年09月17日 15:09:10   投稿:lijiao  
本文跟大家分享了兩個Jquery菜單效果,各有各的特色,希望大家都會喜歡,并且能夠熟練掌握,感興趣的小伙伴們可以參考一下

最終要達到的效果是如圖所示:

當單擊菜單項的時候,可以實現菜單的折疊與展開,這是我們在網頁上經??吹降囊粋€效果。在這里的實現主要應用是CSS控制樣式然后配合jquery實現。
自己的感想:這里比如說綁定要跳轉的頁面,只是靜態(tài)的綁定,不能動態(tài)的綁定,我在開發(fā)過程中用到的動態(tài)綁定是結合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的響應區(qū)域擴充了*/ 
 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"); 
 }); 
}); 

這個例子是上一個例子的延續(xù),我們先來看一下最終我們要達到的效果:

這次我們要實現的是下面的效果,當鼠標滑動到菜單項的時候,子菜單顯示;當鼠標移開的時候,菜單收起。
在這里,我們還解決了在滑動門會有的問題,就是當鼠標快速滑動的時候,會不停地觸發(fā),這個問題。
 
頁面的代碼如下:

 <%@ 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的響應區(qū)域擴充了*/ 
 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完美拖拽,可返回拖動軌跡

    基于jquery完美拖拽,可返回拖動軌跡

    基于jquery完美拖拽,可返回拖動軌跡 用JQ實現,話不多說,直接上碼
    2012-03-03
  • 深入理解jquery跨域請求方法

    深入理解jquery跨域請求方法

    下面小編就為大家?guī)硪黄钊肜斫鈐query跨域請求方法。小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jQuery:unbind方法的使用詳解

    jQuery:unbind方法的使用詳解

    這篇文章主要介紹了jQuery:unbind方法的使用詳解的相關資料,unbind方法只能解綁用jQuery的bind方法以及用jquery方法注冊的事件處理程序,需要的朋友可以參考下
    2017-08-08
  • jQuery中:gt選擇器用法實例

    jQuery中:gt選擇器用法實例

    這篇文章主要介紹了jQuery中:gt選擇器用法,實例分析了:gt選擇器的功能、定義及匹配大于給定索引值元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • Boostrap實現的登錄界面實例代碼

    Boostrap實現的登錄界面實例代碼

    Bootstrap它是一個開源的web開發(fā)前端框架。本界面使用的Bootstrap是v3.3.5版本。這篇文章給大家?guī)砹嗽敿毜膶崿F代碼,非常不錯,感興趣的朋友一起看看吧
    2016-10-10
  • JQuery標簽頁效果實例詳解

    JQuery標簽頁效果實例詳解

    這篇文章主要介紹了JQuery標簽頁效果,結合實例形式較為詳細的分析了jQuery響應鼠標事件動態(tài)遍歷及切換標簽頁的技巧,需要的朋友可以參考下
    2015-12-12
  • JQuery EasyUI Layout 在from布局自適應窗口大小的實現方法

    JQuery EasyUI Layout 在from布局自適應窗口大小的實現方法

    下面小編就為大家?guī)硪黄狫Query EasyUI Layout 在from布局自適應窗口大小的實現方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jQuery事件詳解

    jQuery事件詳解

    本文主要介紹了jQuery事件的相關知識,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • jQuery 同時獲取多個標簽的指定內容并儲存為數組

    jQuery 同時獲取多個標簽的指定內容并儲存為數組

    這篇文章主要介紹了jQuery 同時獲取多個標簽的指定內容并儲存為數組的相關知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-11
  • jquery實現簡易驗證插件封裝

    jquery實現簡易驗證插件封裝

    這篇文章主要為大家詳細介紹了jquery實現簡易驗證插件的封裝,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09

最新評論