社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 主體

JQuery選單效果的兩個實例講解（3）_jquery

WBOY
發布： 2016-05-16 15:38:48
原創
1159 人瀏覽過

最終要達到的效果是如圖：

當點擊選單項目的時候，可以實現選單的折疊與展開，這是我們在網頁上經常看到的效果。這裡的實作主要應用是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"); 
 }); 
});
登入後複製

這個例子是上一個例子的延續，我們先來看看最終我們要達到的效果：

這次我們要實現的是下面的效果，當滑鼠滑動到選單項目的時候，子選單顯示；當滑鼠移開的時候，選單收起。
在這裡，我們也解決了在滑動門會有的問題，就是當滑鼠快速滑動的時候，會不停地觸發，這個問題。
 
頁面的程式碼如下：

 <%@ 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下拉菜单效果 JQuery菜单选中效果 JQuery下拉菜单 JQuery导航菜单 JQuery菜单 JQu
來源：php.cn
上一篇：JS實現黑色大氣的二級導航選單效果_javascript技巧 下一篇：11種ASP連接資料庫的方法_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
選擇 SUM 時控制相鄰列的順序 當您透過SUM選擇時，傳回的資料會分組到單一記錄中，這很好。下面的查詢正確傳回總和，但相鄰列的值似乎始終來自最早的記錄。有什麼辦法可以控制相鄰列的順序嗎？例如，傳回總和並傳回最新行...
來自於 2024-04-04 23:26:33
0
1
402
需要一個 jquery 腳本，根據最終用戶的當前選擇從選擇框中移動選定的選項 我有一個HTML頁面，最終用戶可以透過選擇框元素對我們的項目進行排名。請參閱小提琴來觀看簡單的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
來自於 2024-04-04 18:40:04
0
1
3528
在導覽列中居中顯示下拉式選單 我製作了這個CSS/HTML。 .navbar{width:100%;background-color:rgb(151,44,44);overflow:auto;}.navbara...
來自於 2024-04-04 18:24:52
0
1
338
使用 javascript 將附加價值新增至顯示的格式資料字段 我正在努力實現這一目標：我想創建一個表單來收集用戶輸入的資料並將其列印在螢幕上。到目前為止，我已經透過下面的程式碼片段實現了幾乎正常的效果，但是，我需要「textone」和「tex...
來自於 2024-04-04 15:17:13
0
1
3589
建立一個懸停效果，將選單按鈕轉換為具有陰影複製版本的 x 形狀 首先我想承認我的標題很令人困惑，對此感到抱歉。我想要實現的是懸停時的以下效果：我的網站在這裡https://wordpress-493302-3130963.cloudwaysap...
來自於 2024-04-04 11:55:21
0
2
315
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板