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

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

posted @ 2015-03-17 21:34  xingoo  阅读(4353)  评论(11编辑  收藏  举报