本文中所使用的方法时最原始的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 编程艺术》
