JQuery選單效果的兩個實例講解（3）_jquery
- WBOY原創
- 2016-05-16 15:38:481201瀏覽
最終要達到的效果是如圖：
當點擊選單項目的時候，可以實現選單的折疊與展開，這是我們在網頁上經常看到的效果。這裡的實作主要應用是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();
};
});
});
以上兩種選單效果，大家有沒有掌握，希望這篇文章可以幫助大家。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn