zoukankan      html  css  js  c++  java
  • 博客园添加和隐藏导航菜单

    1. 方法一: 纯css

    效果   

    在'页面定制CSS代码'中添加, left和top根据自己的皮肤自己调节

    .addNav {
      position: absolute;
      top: 70px;
      left: 535px
    }

    在'页首Html代码'中添加, 只需将href内容换为自己的

    <div id="navigator" class="addNav">
      <ul id="navList" class="addNavList">
        <li><a id="blog_nav_js" class="menu" rel="nofollow" href="http://www.cnblogs.com/floraCnblogs/p/fl-cnblogs-menu.html">菜单整合</a></li>
      </ul>
    </div>

    2. 方法二: js

    效果:

    申请js权限
    待成功后
    在管理中的'页首Html代码'中添加:

    <script>
        var navBar = document.getElementById('navList');
        function addNav(linkName, linkClassName, linkHref, linkLocation, isExternalLinks){
            var navigation = document.createElement("li");
            var navigationLink = document.createElement("a");
    
            navigationLink.class = "menu";
            navigationLink.id = linkClassName;
            navigationLink.href = linkHref;
            if (isExternalLinks) {
                navigationLink.target="_blank";
            }
            var navigationName = document.createTextNode(linkName);
            navigationLink.appendChild(navigationName);
    
            navigation.appendChild(navigationLink);
            var navigations = navBar.getElementsByTagName("li");
            if (linkLocation > navigations.length && linkLocation > 0){
                navBar.appendChild(navigation);
            } else {
                navBar.insertBefore(navigation, navigations[linkLocation-1]);
            }
        }
        addNav("导航整合","blog_nav_total","http://www.cnblogs.com/floraCnblogs/p/fl-cnblogs-menu.html", 8, false);
        addNav("我的GitHub","blog_nav_github","https://github.com/FloraLi", 9, true);
    </script>

    3. 隐藏已有菜单栏

    博客园默认菜单栏为博客园,首页,新随笔,联系,订阅,管理
    分别对应css为blog_nav_sitehome,blog_nav_myhome,blog_nav_newpost,blog_nav_contact,blog_nav_rss,blog_nav_admin

    以订阅为例,
    在设置中的'页面定制css代码'中添加

    #navList #blog_nav_rss{
       display: none;
    }
  • 相关阅读:
    Mac下各种编程环境的配置问题(python java)
    hackintosh和windows时区问题
    CAN波特率计算公式
    Jetson nano 安装 TensorFlow
    python逻辑运算符优先级
    CSS知识点(一)
    HTML标签(二)
    python2与python3的区别
    HTML标签(一)
    IO多路复用和协程
  • 原文地址:https://www.cnblogs.com/floraCnblogs/p/setting-cnblogs-menu.html
Copyright © 2011-2022 走看看