本文給大家介紹jquery側(cè)邊欄實現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風格的網(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ū)設置</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側(cè)邊欄代碼，希望對大家有所幫助！
版權(quán)所有:易賢網(wǎng)
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試