JQuery菜單效果的兩個(gè)實(shí)例講解(3)
最終要達(dá)到的效果是如圖所示:
當(dāng)單擊菜單項(xiàng)的時(shí)候,可以實(shí)現(xiàn)菜單的折疊與展開,這是我們?cè)诰W(wǎng)頁上經(jīng)??吹降囊粋€(gè)效果。在這里的實(shí)現(xiàn)主要應(yīng)用是CSS控制樣式然后配合jquery實(shí)現(xiàn)。
自己的感想:這里比如說綁定要跳轉(zhuǎn)的頁面,只是靜態(tài)的綁定,不能動(dòng)態(tài)的綁定,我在開發(fā)過程中用到的動(dòng)態(tài)綁定是結(jié)合asp.net的treeview控件實(shí)現(xiàn)的。不知道大家還有沒有更好的辦法。
前臺(tái)頁面代碼:
<%@ 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="#">菜單項(xiàng)1</a> <ul> <li><a href="#">子菜單11</a></li> <li><a href="#">子菜單12</a></li> </ul> </li> <li class="main"> <a href="#">菜單項(xiàng)2</a> <ul> <li><a href="#">子菜單21</a></li> <li><a href="#">子菜單22</a></li> </ul> </li> <li class="main"> <a href="#">菜單項(xiàng)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在搜狗瀏覽器中不能左對(duì)齊*/ 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; /*下面是用來保證鼠標(biāo)只要停留在li上就可以響應(yīng),也就相當(dāng)于讓li的響應(yīng)區(qū)域擴(kuò)充了*/ 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"); }); });
這個(gè)例子是上一個(gè)例子的延續(xù),我們先來看一下最終我們要達(dá)到的效果:
這次我們要實(shí)現(xiàn)的是下面的效果,當(dāng)鼠標(biāo)滑動(dòng)到菜單項(xiàng)的時(shí)候,子菜單顯示;當(dāng)鼠標(biāo)移開的時(shí)候,菜單收起。
在這里,我們還解決了在滑動(dòng)門會(huì)有的問題,就是當(dāng)鼠標(biāo)快速滑動(dòng)的時(shí)候,會(huì)不停地觸發(fā),這個(gè)問題。
頁面的代碼如下:
<%@ 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="#">菜單項(xiàng)1</a> <ul> <li><a href="#">子菜單11</a></li> <li><a href="#">子菜單12</a></li> </ul> </li> <li class="main"> <a href="#">菜單項(xiàng)2</a> <ul> <li><a href="#">子菜單21</a></li> <li><a href="#">子菜單22</a></li> </ul> </li> <li class="main"> <a href="#">菜單項(xiàng)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="#">菜單項(xiàng)1</a> <ul> <li><a href="#">子菜單11</a></li> <li><a href="#">子菜單12</a></li> </ul> </li> <li class="hmain"> <a href="#">菜單項(xiàng)2</a> <ul> <li><a href="#">子菜單21</a></li> <li><a href="#">子菜單22</a></li> </ul> </li> <li class="hmain"> <a href="#">菜單項(xiàng)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在搜狗瀏覽器中不能左對(duì)齊*/ 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; /*下面是用來保證鼠標(biāo)只要停留在li上就可以響應(yīng),也就相當(dāng)于讓li的響應(yīng)區(qū)域擴(kuò)充了*/ 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)在的這個(gè)變量用來解決鼠標(biāo)快速滑動(dòng)問題clearInterval(setTimeoutId); nodeLi.children("ul").slideUp(); var setTimeoutId; $(".hmain").hover(function () { var nodeLi = $(this); setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300) }, //上面的函數(shù)是鼠標(biāo)進(jìn)入的操作,下面的操作是鼠標(biāo)移出的操作。 function () { //開始的時(shí)候,我在這里犯了一個(gè)錯(cuò)誤,應(yīng)該重新定義一下nodeLi var nodeLi = $(this); clearTimeout(setTimeoutId); if (nodeLi.children("ul").length != 0) { nodeLi.children("ul").slideUp(); }; }); });
以上兩種菜單效果,大家有沒有掌握,希望這篇文章可以幫助到大家。
- jQuery點(diǎn)擊彈出下拉菜單的小例子
- JQuery實(shí)現(xiàn)絢麗的橫向下拉菜單
- 巧用jquery解決下拉菜單被Div遮擋的相關(guān)問題
- 用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡單的下拉菜單
- JQuery設(shè)置獲取下拉菜單某個(gè)選項(xiàng)的值(比較全)
- jQuery實(shí)現(xiàn)漸變下拉菜單的簡單方法
- jQuery實(shí)現(xiàn)精美的多級(jí)下拉菜單特效
- jQuery實(shí)現(xiàn)向下滑出的平滑下拉菜單效果
- jquery實(shí)現(xiàn)很酷的網(wǎng)頁頂部圖標(biāo)下拉菜單效果
- jquery帶下拉菜單和焦點(diǎn)圖代碼分享
- jQuery實(shí)現(xiàn)的多級(jí)下拉菜單效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示二級(jí)下拉菜單效果
- jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
- jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果
- jQuery實(shí)現(xiàn)的簡潔下拉菜單導(dǎo)航效果代碼
- jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果
- jQuery實(shí)現(xiàn)多級(jí)下拉菜單jDropMenu的方法
- jquery實(shí)現(xiàn)簡單的二級(jí)導(dǎo)航下拉菜單效果
- jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級(jí)下拉菜單代碼
- jQuery簡單實(shí)現(xiàn)兩級(jí)下拉菜單效果代碼
- JQuery入門基礎(chǔ)小實(shí)例(1)
- jQuery實(shí)現(xiàn)可編輯的表格實(shí)例講解(2)
相關(guān)文章
Boostrap實(shí)現(xiàn)的登錄界面實(shí)例代碼
Bootstrap它是一個(gè)開源的web開發(fā)前端框架。本界面使用的Bootstrap是v3.3.5版本。這篇文章給大家?guī)砹嗽敿?xì)的實(shí)現(xiàn)代碼,非常不錯(cuò),感興趣的朋友一起看看吧2016-10-10JQuery EasyUI Layout 在from布局自適應(yīng)窗口大小的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query EasyUI Layout 在from布局自適應(yīng)窗口大小的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05jQuery 同時(shí)獲取多個(gè)標(biāo)簽的指定內(nèi)容并儲(chǔ)存為數(shù)組
這篇文章主要介紹了jQuery 同時(shí)獲取多個(gè)標(biāo)簽的指定內(nèi)容并儲(chǔ)存為數(shù)組的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11jquery實(shí)現(xiàn)簡易驗(yàn)證插件封裝
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡易驗(yàn)證插件的封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09