跟我来玩转CSDN BLOG界面

全文http://blog.csdn.net/laily/archive/2004/07/30/55963.aspx

欢迎来到阿赖的BLOG专栏，不知道你对我上面导航菜单感兴趣？我想你也注意到了左上角有一个按钮可以用来控制左边导航栏的显示/隐藏，还有导航栏里面的每个项都是可以通过单击栏目标题来控制展开/收缩的。好东东不敢独享，下面我就说说如何实现的。

导航菜单是使用阿赖的javascript菜单控件(xp风格版)生成的，你可以访问http://www.9499.net?go=tc以获得关于此控件程序的教程和示例。菜单是通过遍历导航菜单栏的链接项动态生成的。下面的全部javascript程序代码：

<SCRIPT language=javascript src="http://gf.yf163.com/tmp/alai_menu_xp.js"></script>
<SCRIPT language=javascript>
<!--
document.body.onload=function()
{
try{
var mc=new alai_menu_bar1(document.all.tagline) //建立导航菜单
var imgUp=new Image()
var imgDown=new Image()
imgUp.src="/images/blog_csdn_net/laily/17459/o_minus.gif"
imgDown.src="/images/blog_csdn_net/laily/17459/o_plus.gif"
var h3=document.getElementsByTagName("h3")
for(var i=0;i<h3.length;i++)
{
if(h3[i].sourceIndex>rightmenu.nextSibling.sourceIndex)break
var img=new Image()
img.src=imgUp.src
h3[i].insertAdjacentElement("afterBegin",img)
h3[i].onclick=function()
{
var ul=this.nextSibling
var img=document.all[this.sourceIndex+1]
ul.style.display=(ul.style.display=="none")?"block":"none"
img.src=(ul.style.display=="none")?imgDown.src:imgUp.src
} //以上代码主要控制导航栏的，以下代码为生成菜单
if(h3[i].nextSibling.tagName.toLowerCase()!="ul")continue
var mnu=new alai_menu_xp(260)
var items=h3[i].nextSibling.children
if(items==null)continue
for(var j=0;j<items.length;j++)
{
var item=items[j].childNodes[0]
if(item==null)continue
if(typeof(item.innerText)=="undefined" || typeof(item.href)=="undefined")continue
if(item.target=="")item.target="_self"
mnu.addLink(item.href,item.innerText,item.target,"http://gf.yf163.com/tmp/tc/images/html.gif")
}
if(mnu.item.length>0)mc.add(h3[i].innerText,mnu)
}
h3[0].click();h3[1].click(); //收缩导航栏的"my link"和"blog stats"

//添加控制导航栏收缩/展开的按钮
var btn=document.createElement('span');
document.body.insertAdjacentElement('beforeEnd',btn);btn.style.cssText='position:absolute;display:block;top:22;left:2;width:110;height:20;color:blue;background:yellow;border:2 outset;cursor:hand;';
btn.innerText='<<收回导航栏';
btn.onclick=function()
{
var isHide=(rightmenu.style.display=='none');
rightmenu.style.display=isHide?'block':'none';
btn.innerText=isHide?'<<收回导航栏':'展开导航栏>>';
}
} catch(e){;}
}
//-->
</SCRIPT>

将以上程序代码粘贴到配置-静态新闻/声明里即可。特别提醒，我的Blog配置皮肤设置为gertrude-red.css，如果你使用其它的皮肤程序可能需要作一些更改才能正确生成菜单。