如何在博客园中自定义导航菜单

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