jQuery側(cè)邊欄實現(xiàn)代碼
更新時間：2016年05月06日 14:35:09 作者：fiona0425
本文給大家介紹jquery側(cè)邊欄實現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁上,如果你覺得不錯,可以參考下本文實現(xiàn)代碼
先給大家展示下實現(xiàn)效果圖，如果親感覺是您想要的效果，請參考本代碼。
實現(xiàn)代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript菜單側(cè)邊展開(改良版)</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">系統(tǒng)管理</a>
<ul>
<li><a href="#">地區(qū)設(shè)置</a></li>
<li><a href="#">分行設(shè)置</a></li>
<li><a href="#">銀行操作用戶設(shè)置</a></li>
<li><a href="#">密碼修改</a></li>
</ul>
</li>
<li><a href="#">學(xué)校管理</a>
<ul>
<li><a href="#">學(xué)校設(shè)置</a></li>
<li><a href="#">學(xué)校查詢</a></li>
</ul>
</li>
<li><a href="#">基礎(chǔ)信息管理</a></li>
<li><a href="#">統(tǒng)計系統(tǒng)查詢</a></li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>
var $j = jQuery.noConflict();
$j(function(){
var lis = document.getElementById("navigation").getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "lightblue";
}
lis[i].onmouseout=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "";
}
}
});
</script>
<script src="jquery-1.11.1.js"></script>
</body>
</html>
以上是本文給大家介紹的jquery側(cè)邊欄代碼，希望對大家有所幫助！同時也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- 博客側(cè)邊欄模塊跟隨滾動條滑動固定效果的實現(xiàn)方法(js+jquery等)
- jQuery固定浮動側(cè)邊欄實現(xiàn)思路及代碼
- Jquery實現(xiàn)側(cè)邊欄跟隨滾動條固定（兼容IE6）
- jQuery側(cè)邊欄隨窗口滾動實現(xiàn)方法
- jquery仿京東側(cè)邊欄導(dǎo)航效果
- jquery實現(xiàn)側(cè)邊欄左右伸縮效果的示例
- jQuery實現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
- 基于jQuery傾斜打開側(cè)邊欄菜單特效代碼
- Jquery實現(xiàn)顯示和隱藏的4種簡單方式
- JQuery顯示、隱藏div的幾種方法簡明總結(jié)
- jQuery實現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解
相關(guān)文章
雖然現(xiàn)在DIV+CSS進行頁的布局大行其道，但是很多地方使用table還是有很多優(yōu)勢，用table展示數(shù)據(jù)是比較方便的，下面匯總了jQuery操作Table tr td常用的方法，熟記這些操作技巧，下次再使用的到時候，會讓你如魚得水，提高開發(fā)效率2014-04-04
jquery超簡單實現(xiàn)手風(fēng)琴效果的方法
這篇文章主要介紹了jquery超簡單實現(xiàn)手風(fēng)琴效果的方法,只需要幾行代碼即可實現(xiàn)手風(fēng)琴效果的樣式變換功能,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery常用選擇器的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)，本文給大家簡單介紹jsonp 使用小結(jié) ，需要的朋友參考下2016-01-01
jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕
這篇文章主要介紹了jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕,需要的朋友可以參考下2015-11-11
本篇文章主要是對快速解決jQuery與其他庫沖突的方法進行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JQuery中html()方法使用不當(dāng)帶來的陷阱
html方法當(dāng)不傳參數(shù)時用來獲取元素的html內(nèi)容2011-04-04
有了JQuery對JS的整合和封裝，它讓頁面操作更加的隨心所欲，所以只有遵循良好的規(guī)范才會讓代碼更高效，更健壯。以下是我對如何高效操作JQuery的一些拙見，望指正！2014-04-04
jQuery中使用each處理json數(shù)據(jù)
這篇文章主要介紹了jQuery中使用each處理json數(shù)據(jù),非常簡單實用，需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了jquery樹形插件zTree高級使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08