JQuery菜單效果的兩個實例講解（3）
更新時間：2015年09月17日 15:09:10 投稿：lijiao
本文跟大家分享了兩個Jquery菜單效果，各有各的特色，希望大家都會喜歡，并且能夠熟練掌握，感興趣的小伙伴們可以參考一下
最終要達到的效果是如圖所示：
當單擊菜單項的時候，可以實現(xiàn)菜單的折疊與展開，這是我們在網(wǎng)頁上經(jīng)?？吹降囊粋€效果。在這里的實現(xiàn)主要應用是CSS控制樣式然后配合jquery實現(xiàn)。
自己的感想：這里比如說綁定要跳轉(zhuǎn)的頁面，只是靜態(tài)的綁定，不能動態(tài)的綁定，我在開發(fā)過程中用到的動態(tài)綁定是結(jié)合asp.net的treeview控件實現(xiàn)的。不知道大家還有沒有更好的辦法。
前臺頁面代碼：
<%@ 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ù)，我們先來看一下最終我們要達到的效果：
這次我們要實現(xiàn)的是下面的效果，當鼠標滑動到菜單項的時候，子菜單顯示；當鼠標移開的時候，菜單收起。
在這里，我們還解決了在滑動門會有的問題，就是當鼠標快速滑動的時候，會不停地觸發(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");
});
//現(xiàn)在的這個變量用來解決鼠標快速滑動問題clearInterval(setTimeoutId); nodeLi.children("ul").slideUp();
var setTimeoutId;
$(".hmain").hover(function () {
var nodeLi = $(this);
setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300)
},
//上面的函數(shù)是鼠標進入的操作，下面的操作是鼠標移出的操作。
function () {
//開始的時候，我在這里犯了一個錯誤，應該重新定義一下nodeLi
var nodeLi = $(this);
clearTimeout(setTimeoutId);
if (nodeLi.children("ul").length != 0) {
nodeLi.children("ul").slideUp();
};
});
});
以上兩種菜單效果，大家有沒有掌握，希望這篇文章可以幫助到大家。
您可能感興趣的文章:
- jQuery點擊彈出下拉菜單的小例子
- JQuery實現(xiàn)絢麗的橫向下拉菜單
- 巧用jquery解決下拉菜單被Div遮擋的相關(guān)問題
- 用jquery實現(xiàn)的一個超級簡單的下拉菜單
- JQuery設置獲取下拉菜單某個選項的值(比較全)
- jQuery實現(xiàn)漸變下拉菜單的簡單方法
- jQuery實現(xiàn)精美的多級下拉菜單特效
- jQuery實現(xiàn)向下滑出的平滑下拉菜單效果
- jquery實現(xiàn)很酷的網(wǎng)頁頂部圖標下拉菜單效果
- jquery帶下拉菜單和焦點圖代碼分享
- jQuery實現(xiàn)的多級下拉菜單效果代碼
- jquery實現(xiàn)鼠標滑過顯示二級下拉菜單效果
- jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼
- jquery實現(xiàn)鼠標經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
- jquery實現(xiàn)的淡入淡出下拉菜單效果
- jQuery實現(xiàn)的簡潔下拉菜單導航效果代碼
- jquery實現(xiàn)平滑的二級下拉菜單效果
- jQuery實現(xiàn)多級下拉菜單jDropMenu的方法
- jquery實現(xiàn)簡單的二級導航下拉菜單效果
- jQuery實現(xiàn)帶動畫效果的多級下拉菜單代碼
- jQuery簡單實現(xiàn)兩級下拉菜單效果代碼
- JQuery入門基礎小實例(1)
- jQuery實現(xiàn)可編輯的表格實例講解（2）
相關(guān)文章
基于jquery的文本框記數(shù)器實現(xiàn)代碼，需要的朋友可以參考下2012-09-09
這篇文章主要介紹了jquery實現(xiàn)多條件篩選特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery 獲取、設置HTML或TEXT內(nèi)容的兩種方法
這篇文章主要介紹了jQuery 獲取、設置HTML或TEXT內(nèi)容的兩種方法,需要的朋友可以參考下2014-05-05
本文給大家介紹的是如何使用jquery 改寫Alert彈出框樣式，十分的實用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了jQuery實現(xiàn)彈出帶遮罩層的居中浮動窗口效果,涉及jQuery針對頁面元素的運算與樣式的動態(tài)修改相關(guān)技巧,需要的朋友可以參考下2016-09-09
添加節(jié)點的方法有很多，在本文將為大家介紹下jquery中添加節(jié)點幾種方法，感興趣的朋友可以參考下2013-09-09
輕松學習jQuery插件EasyUI EasyUI實現(xiàn)拖動基本操作
這篇文章主要幫大家輕松學習jQuery插件EasyUI，并利用EasyUI實現(xiàn)拖動基本操作，文章并提供了一個學校課程表簡單實例，感興趣的小伙伴們可以參考一下2015-11-11
基于Jquery+div+css實現(xiàn)彈出登錄窗口(代碼超簡單)
這篇文章給大家介紹基于jquery div css三者相結(jié)合實現(xiàn)彈出登錄窗口，實現(xiàn)大致思路是這樣的：通過dispaly：none屬性先隱藏在顯示，感興趣的朋友一起看看代碼實現(xiàn)過程吧2015-10-10
樹形結(jié)構(gòu)里的節(jié)點，如果它不是根部，也不是末枝，那么它一定有父母和孩子。2010-02-02
JQUERY 實現(xiàn)窗口滾動搜索框?？啃Ч?類似滾動?？?
由于分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這里，處于對用戶體驗的考慮，我使用Jquery實現(xiàn)了一種類似滾動停靠的效果，感興趣的朋友可以參考下哈2013-03-03