如何在博客园中自定义导航菜单
2015-03-17 21:34
127 查看
本文中所使用的方法时最原始的DOM节点方法,所以如果有其他高效的办法,还请指正。
如果有什么问题,请留言~转载请注明【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 编程艺术》相关文章推荐
- 如何实现网页自定义右键菜单?
- 教你如何用TreeView树形菜单创建像CSDN左边那样的导航之二:如何建立一个静态的TreeView
- 图形的绘制,如何使用自定义画笔(颜色,线宽,线形)。如何为程序中添加选项菜单和选项设置对话框,如何使用标准颜色对话框,如何使用字体对话框,在选项对话框中实现预览功能。实现选项对话框和窗口类中的数据交换。如何改变对话框和控件的背景色,如何改变控件的文本颜色,
- 为SharePoint网站创建自定义导航菜单
- 如何在 Excel 中自定义菜单和菜单栏
- 博客园左边导航菜单的问题
- Flex4组件教程:自定义两级导航菜单组件
- 使用Jquery+CSS如何创建流动导航菜单-Fluid Navigation
- 使用Jquery+CSS如何创建流动导航菜单-Fluid Navigation 推荐
- 如何自定义Word右键菜单
- (DB ,sqlserver2005,tips)如何获取用户自定义的触发器的内容(在sqlserver2005树形菜单没有显示)
- 如何使用VC自定义菜单
- 如何:向 Outlook 添加自定义菜单和菜单项
- 如何在Joomla!新建菜单类型里快速增加自定义组件类型?
- 『GEF』如何在Palette中添加自定义菜单。
- 教你如何用TreeView树形菜单创建像CSDN左边那样的导航之一:如何安装配置TreeView
- 如何添加自定义系统菜单 - C++ & MFC
- [转]自定义MOSS导航菜单
- 如何在Windows右键新建菜单中添加自定义项
- 如何自定义Word右键菜单