JavaScript实现QQ菜单效果

原文出处：http://www.richbox.net/blog

 

HTML部分：

 

<div id=”globalNav”>
<h3>快捷导航</h3>
<ul class=”selected”>
<li><a href=”start.html”>a</a></li>
<li><a href=”start.html”>b</a></li>
</ul>
<h3>访问统计</h3>
<ul>
<li><a href=”start.html”>c</a></li>
<li><a href=”start.html”>c</a></li>
</ul>
<h3>文章分析</h3>
<ul>
<li><a href=”start.html”>e</a></li>
<li><a href=”start.html”>f</a></li>
</ul>
</div>

 

Javascript部分：

 

function initNav() {
var h3s=$(“globalNav”).getElementsByTagName(“h3″);
var uls=$(“globalNav”).getElementsByTagName(“ul”);
for(var i=0;i<h3s.length;i++) {
h3s[i].target=uls[i];
h3s[i].onclick=function() {
for(var j=0;j<uls.length;j++) {
if(uls[j]==this.target) {
uls[j].className=”selected”;
} else {
uls[j].className=”";
}
}
initNavHeight();
}
}
initNavHeight();
}
function initNavHeight() {
var h3s=$(“globalNav”).getElementsByTagName(“h3″);
var h=$(“globalNav”).offsetHeight;
var si=getElementsByClassName($(“globalNav”),”selected”)[0];
si.style.height=h-(h3s.length*27)-20+”px”;
}