jQuery側邊欄實現(xiàn)代碼
更新時間：2016年05月06日 14:35:09 作者：fiona0425
本文給大家介紹jquery側邊欄實現(xiàn)代碼，這些側邊欄菜單可以用在不同風格的網(wǎng)頁上,如果你覺得不錯,可以參考下本文實現(xiàn)代碼
先給大家展示下實現(xiàn)效果圖，如果親感覺是您想要的效果，請參考本代碼。
實現(xiàn)代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript菜單側邊展開(改良版)</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">系統(tǒng)管理</a>
<ul>
<li><a href="#">地區(qū)設置</a></li>
<li><a href="#">分行設置</a></li>
<li><a href="#">銀行操作用戶設置</a></li>
<li><a href="#">密碼修改</a></li>
</ul>
</li>
<li><a href="#">學校管理</a>
<ul>
<li><a href="#">學校設置</a></li>
<li><a href="#">學校查詢</a></li>
</ul>
</li>
<li><a href="#">基礎信息管理</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側邊欄代碼，希望對大家有所幫助！同時也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了jquery實現(xiàn)圖片燈箱明暗的遮罩效果，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了jquery實現(xiàn)圖片預加載的方法，內(nèi)容很詳細，帶領大家全方位學習jquery圖片預加載，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jQuery簡單獲取DIV和A標簽元素位置的方法,結合實例形式分析了jQuery針對頁面div及A標簽元素相關操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片自動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery實現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
這篇文章主要介紹了jQuery實現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法,涉及jQuery響應鼠標事件動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下2015-11-11
因為我的留言板是倒序，默認又只會展開最新的5條留言，對于較舊留言甚至是沙發(fā)的同學，很容易被忽略掉。2009-06-06
這篇文章主要介紹了如何基于jQuery實現(xiàn)五角星評分,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
div層的放大與縮小想必大家已不是那么陌生了吧，接下來為大家詳細介紹下使用jQuery實現(xiàn)，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
這篇文章主要為大家詳細介紹了jquery自定義組件實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
jquery中append()與appendto()用法分析
這篇文章主要介紹了jquery中append()與appendto()用法分析,以實例的形式分析了jquery中append()與appendto()的具體語法與詳細用法,需要的朋友可以參考下2014-11-11