跟我來玩轉CSDN BLOG介面

歡迎來到阿賴的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，如果你使用其它的皮膚程式可能需要作一些更改才能正確產生菜單。