本文給大家介紹jquery側邊欄實現代碼，這些側邊欄菜單可以用在不同風格的網頁上,如果你覺得不錯,可以參考下本文實現代碼
先給大家展示下實現效果圖，如果親感覺是您想要的效果，請參考本代碼。
實現代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript菜單側邊展開(改良版)</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">系統管理</a>
<ul>
<li><a href="#">地區設置</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="#">統計系統查詢</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側邊欄代碼，希望對大家有所幫助！
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
