Blogs添加导航菜单

Posted 2020-11-28 l75790

#1、隐藏默认导航菜单

#header{display:none;}   /*在页面定制CSS里面最前面添加如下代码，最好添加在最前面*/

#2、添加页首html代码

<!-- 添加博客导航栏信息开始-->
<div id="container">
<div id="logo"><a href="#"></a></div>
<div id="nav">
    <div class="left"></div>
    <div class="item">
        <ul>
            <li><a href="https://www.cnblogs.com/l75790/" class="p current">网站首页</a></li><li class="split" />
            <li><a href="https://i-beta.cnblogs.com/posts/edit" class="p current">新随笔</a></li><li class="split" />
        <li><a class="p" href="https://www.cnblogs.com/l75790/category/1485937.html" title="#">Blogs优化</a></li><li class="split">

            <li><a href="#" class="p">WP网站建设
                <em><a href="https://www.cnblogs.com/l75790/category/1691404.html" title="#">环境搭建</a>
                    <a href="#" title="#">疑难杂症</a>
                </em></a></li><li class="split" />

            <li><a href="#" class="p">数据库知识
                <em><a href="https://www.cnblogs.com/l75790/category/1754507.html" title="#">mysql</a>
                    <a href="#" title="#">Oracle</a>
                </em></a></li><li class="split" />

            <li><a href="#" class="p">Linux运维
                <em><a href="https://www.cnblogs.com/l75790/category/1247263.html" title="#">命令基础</a>
                    <a href="#" title="#">服务搭建</a>
                    <a href="https://www.cnblogs.com/l75790/category/1246694.html" title="#">疑难杂症</a>
                </em></a></li><li class="split" />

            <li><a href="#" class="p">网络运维
                <em><a href="https://www.cnblogs.com/l75790/category/1472868.html" title="#">网络基础</a>
                    <a href="https://www.cnblogs.com/l75790/category/1481379.html" title="#">网络管理</a>
                </em></a></li><li class="split" />
            
            
            <li><a class="p" href="#" title="#">后台登录</a></li><li class="split">
            <li><a class="p" href="#" title="#" style="padding-right:10px;float: right">关于博主</a></li><li class="split">
        </ul>
    </div>
    <div class="right"></div>
</div>

<script type="text/javascript">
    var _ntor = navigator.userAgent;
    var otherNav = _ntor.indexOf("IE 7.0") != -1 || _ntor.indexOf("IE 6.0") != -1;
    if (otherNav) {
        $("a.p").mouseover(function () {
            $("#nav li div").each(function () { this.parentNode.removeChild(this); });
            var _html = this.getElementsByTagName(‘em‘)[0].innerHTML;
            var _div = document.createElement("div");
            _div.className = ‘emp‘;
            _div.innerHTML = _html;
            /* _div.onmouseout = function () { this.parentNode.removeChild(_div); }*/
            this.parentNode.appendChild(_div);
        });
    }
</script>
<!-- 添加博客导航栏信息结束-->

#3、添加定制css代码

/*头部导航栏CSS设置开始*/
#header{display:none;}
#nav{background:url(X) 0 -73px;height:41px; color:blue}
#nav div.left{float:left;width:2px;margin-right:2px;height:41px;background:red url(X) 0 -31px;}
#nav div.item{float:left;width:auto;margin:0 2px 0 2px;}
#nav div.right{float:right;width:2px;margin-left:-2px;height:41px;background:red url(X) -10px -31px;}
#nav div.item ul{list-style:none;margin:0;padding:0 10px;}#nav div.item li{float:left;position:relative;}
#nav div.item li.split{background:url(X) -12px -31px no-repeat;width:2px;height:41px;}
#nav a.p:link,#nav a.p:visited{padding:0 18px;line-height:41px;display:block;float:left;color:blue;text-decoration:none;font-weight:bold;font-size:14px;}
#nav a.p:hover,#nav a.current{background:url(X) 0 -115px no-repeat;zoom:1;}
#nav li em{display:none;font-style:normal;position:absolute;top:41px;background:#75B4D4;width:100px;overflow:hidden;}
#nav li:hover em{display:inherit;}
#nav a.p:hover em{display:inherit;}
#nav em a:link,#nav em a:visited{line-height:30px;font-size:12px;display:block;padding:0 8px;text-decoration:none;color:blue;border-bottom:dotted 1px White;}
#nav em a:hover{font-weight:bold;background:orange;}
/* IE6,7下用div显示 */
#nav div.emp{position:absolute;top:41px;left:0;background:#75B4D4;width:250px;}
#nav div.emp a:link,#nav div.emp a:visited{line-height:30px;font-size:12px;display:block;padding:0 8px;text-decoration:none;color:blue;border-bottom:dotted 1px White;}
#nav div.emp a:hover{font-weight:bold;background:orange;}
/*头部导航栏设置结束*/