zoukankan      html  css  js  c++  java
  • 如何在博客园中自定义导航菜单

     

    最新版本导航代码

    第一步:明确导航信息,在样式表中隐藏

    复制代码
    #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 编程艺术》

  • 相关阅读:
    49. 字母异位词分组
    73. 矩阵置零
    Razor语法问题(foreach里面嵌套if)
    多线程问题
    Get json formatted string from web by sending HttpWebRequest and then deserialize it to get needed data
    How to execute tons of tasks parallelly with TPL method?
    How to sort the dictionary by the value field
    How to customize the console applicaton
    What is the difference for delete/truncate/drop
    How to call C/C++ sytle function from C# solution?
  • 原文地址:https://www.cnblogs.com/sunscheung/p/4519512.html
Copyright © 2011-2022 走看看