如何在博客園中自定義導航菜單

本文中所使用的方法時最原始的DOM節點方法，如果有jquery經驗的朋友，還可以使用jquery。

如果有什么問題，請留言~轉載請注明【xingoo】

　　最新版本導航代碼

第一步：明確導航信息，在樣式表中隱藏

#nav_rss{
    display: none;
}
#nav_contact{
    display: none;
}
#nav_newpost{
    display: none;
}
#nav_myhome{
    display: none;
}
#nav_sitehome{
    display: none;
}
#nav_ing{
    display: none;
}
#nav_admin{
    display: none;
}
#nav_q{
    display: none;
}

　　第二步，添加自定義導航。與之前的代碼相比，設置了導航公共對象，避免過多查詢DOM樹

var _navigator = document.getElementsByTagName("ul")[0];//獲得導航DOM對象

addNag("Cnblogs","http://www.cnblogs.com/");
addNag("Github","https://github.com/xinghalo");
addNag("Eclipse","http://www.cnblogs.com/xing901022/p/4115610.html");
addNag("Web","http://www.cnblogs.com/xing901022/p/4133587.html");
addNag("架構","http://www.cnblogs.com/xing901022/p/4034492.html");
addNag("New","http://i.cnblogs.com/EditPosts.aspx?opt=1");
addNag("管理","http://i.cnblogs.com/");

function addNag(linkName,linkHref){                
    //創建導航無序列表中的li
    var _link = document.createElement("li");
    var _a = document.createElement("a");
    _a.class="menu";
    _a.href= linkHref;
    var _text = document.createTextNode(linkName);
    _a.appendChild(_text);
    _link.appendChild(_a);
    //添加至末尾
    _navigator.appendChild(_link);
}

　　復制粘貼

　　博客園默認的給出了幾個導航：博客園、首頁、新隨筆、聯系我、管理等等。其實查看代碼就可以發現，都是一些標簽而已。

　　代碼的效果，可以參考博主的導航！

　　如果想要添加自己的導航，只要把下面的代碼粘貼到博客園后台管理的【頁首Html代碼】中即可：

　　粘貼代碼如下：

<script>
addNag("前端","http://www.cnblogs.com/xing901022/p/4280305.html",3);
addNag("Java","http://www.cnblogs.com/xing901022/p/4133587.html",3);
addNag("設計模式","http://www.cnblogs.com/xing901022/p/4034492.html",3);
addNag("插件","http://www.cnblogs.com/xing901022/p/4115610.html",3);
addNag("書單","http://www.cnblogs.com/xing901022/p/3694709.html",3);function addNag(linkName,linkHref,linkLocation){
                //獲得導航DOM對象
                var _navigator = document.getElementsByTagName("ul")[0];
                //創建導航無序列表中的li
                var _link = document.createElement("li");
                var _a = document.createElement("a");
                _a.class="menu";
                _a.href= linkHref;
                var _text = document.createTextNode(linkName);
                _a.appendChild(_text);
                _link.appendChild(_a);
                //添加至指定的位置
                var _lis = _navigator.getElementsByTagName("li");
                if(linkLocation > _lis.length && linkLocation > 0){
                    _navigator.appendChild(_link);
                }else{
                    _navigator.insertBefore(_link,_lis[linkLocation-1]);
                }
            }
</script>

　　需要修改的地方就是addNag方法中的三個參數：

　　第一個參數linkName：是你的導航菜單的名字。

　　第二個參數linkHref：是導航的鏈接地址。

　　第三個參數linkLocation：是你想要放置的位置。

　　注意：

　　1 前兩個參數都要使用 雙引號"" 包圍。

　　2 防止的位置，是你想要把它放在第幾個位置。比如第一個3，就把它放在3位置。

　　如果第二個方法中再次是3，則會把第一個的位置擠到4上面。

　　當然，如果0或者超出已有的長度，都會直接添加到末尾。

　　代碼講解

　　由於小弟也是前端新手，所以使用的方法十分古老，就是利用DOM文檔樹結構，直接新建節點插到導航立面。

　　所以刷新的時候，會發現自己創建的菜單會晚一點刷新出來。

　　下面看看代碼部分：

 

　　使用document.getElementsByTagName("ul")[0]就可以查看到：

　　由於博客園的ul有很多，但是導航又沒有id只能通過上面的方式，獲取到導航對象了。

 

　　導航中的標簽要使用menu的樣式，這樣可以保證風格一致。

　　可以使用setAttribute方法，或者直接使用HTML DOM中的class屬性。

 

　　最后的添加位置，設置了長度校驗。關於位置的放置，就隨大家處理了。

 

　　參考

　　【1】《Javascript DOM 編程藝術》