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;
    }
  • 相关阅读:
    ImageView的属性android:scaleType作用
    android程序内存泄漏的原因和解决办法
    如何在Android使用Rest服务从客户端调用webservice
    android系统如何自适应屏幕大小
    使用GitHub进行版本管理
    Android中dp、sp、px的转换和区别。
    软件开发:手机应用程序开发注意事项
    学用MVC4做网站二:2.2添加用户组
    学用MVC4做网站二:2.1浏览用户组
    学用MVC4做网站二:2.4删除用户组
  • 原文地址:https://www.cnblogs.com/floraCnblogs/p/setting-cnblogs-menu.html
Copyright © 2011-2022 走看看