zoukankan      html  css  js  c++  java
  • Blogs实现导航菜单

    #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="https://i-beta.cnblogs.com/" 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;2px;margin-right:2px;height:41px;background:red url(X) 0 -31px;}
    #nav div.item{float:left;auto;margin:0 2px 0 2px;}
    #nav div.right{float:right;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;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;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;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;}
    /*头部导航栏设置结束*/
  • 相关阅读:
    HDU 4539郑厂长系列故事――排兵布阵(状压DP)
    HDU 2196Computer(树形DP)
    HDU 4284Travel(状压DP)
    HDU 1520Anniversary party(树型DP)
    HDU 3920Clear All of Them I(状压DP)
    HDU 3853LOOPS(简单概率DP)
    UVA 11983 Weird Advertisement(线段树求矩形并的面积)
    POJ 2886Who Gets the Most Candies?(线段树)
    POJ 2828Buy Tickets
    HDU 1394Minimum Inversion Number(线段树)
  • 原文地址:https://www.cnblogs.com/l75790/p/12840103.html
Copyright © 2011-2022 走看看