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)文章
這篇文章主要介紹了jquery實現(xiàn)圖片燈箱明暗的遮罩效果，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了jquery實現(xiàn)圖片預(yù)加載的方法，內(nèi)容很詳細(xì)，帶領(lǐng)大家全方位學(xué)習(xí)jquery圖片預(yù)加載，感興趣的小伙伴們可以參考一下2015-12-12
jQuery簡單獲取DIV和A標(biāo)簽元素位置的方法
這篇文章主要介紹了jQuery簡單獲取DIV和A標(biāo)簽元素位置的方法,結(jié)合實例形式分析了jQuery針對頁面div及A標(biāo)簽元素相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)圖片自動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery實現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
這篇文章主要介紹了jQuery實現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-11-11
因為我的留言板是倒序，默認(rèn)又只會展開最新的5條留言，對于較舊留言甚至是沙發(fā)的同學(xué)，很容易被忽略掉。2009-06-06
這篇文章主要介紹了如何基于jQuery實現(xiàn)五角星評分,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
div層的放大與縮小想必大家已不是那么陌生了吧，接下來為大家詳細(xì)介紹下使用jQuery實現(xiàn)，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
這篇文章主要為大家詳細(xì)介紹了jquery自定義組件實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
jquery中append()與appendto()用法分析
這篇文章主要介紹了jquery中append()與appendto()用法分析,以實例的形式分析了jquery中append()與appendto()的具體語法與詳細(xì)用法,需要的朋友可以參考下2014-11-11