欢迎访问,本站接受互联网网站仿站、功能定制、定制插件、主题,如果需要的话可以联系我 QQ:2283276927

Zblog metro主题修改为下拉式导航的方法

雨夜 3977次浏览 3个评论

今天一博友回复说自己的博客的metro主题不能修改为下拉式导航的问题,实际上可以修改,查看代码可以知道:原模板只是在div的框上加上一个div框,只需要更改css代码就可以实现了。

导航代码为:

<div class="nevbarbg">
  <div class="navbar">
    <ul>
      <#CACHE_INCLUDE_NAVBAR#>
    </ul>
  </div>
</div>

(不用修改)

方法如下:

把css导航部分代码:

.nevbarbg { width:100%; height:40px; background: #A3D0F2;}

.navbar { width:980px; height:40px; line-height:40px; margin:0 auto; 
background: #A3D0F2; overflow:hidden;}

.navbar ul li { float:left; font-size:16px; padding:0 20px 0 0;}

.navbar ul li a { display:block; float:left; padding:0 10px;
 color: #333333;}

.navbar ul li a:hover{ background:#FFFFFF; color:#5EAAE4;} 

.navbar ul li a.on{background:#5EAAE4;color:#fff;}

更换为:

.nevbarbg { width:100%; height:40px; background: #A3D0F2;}

.navbar {background: #A3D0F2;height:40px;width:980px; position:relative;
 z-index:10000;font-weight:normal;margin:0 auto;}

.navbar  ul{height:40px;width:760px;float:left;}

.navbar  a{padding:0px 0px; display:block;color:#f8f8f8;
font-weight:normal;}

.navbar  a:hover{background:#e36c09  ;text-decoration:none;
 color: #FFFFFF;}

.navbar  li {position: relative;height: 100%; width:102px;
 text-align:center;

 font:'Microsoft Yahei';float: left; line-height:40px;} 

.navbar  ul ul {visibility:hidden;padding:0px 0px;width: auto;
white-space:nowrap;

font: 14px  'Microsoft Yahei',Verdana, Arial, Helvetica, sans-serif;
 background-color:#FFFFFF;} 

.navbar  ul li:hover ul,

.navbar  ul a:hover ul{visibility:visible; margin:auto; } 

.navbar  ul ul li a{width:102px;margin:0;padding:0px 0px;
color:#f8f8f8;

font-weight:normal;line-height:40px;background: #A3D0F2;}

 就可以了,保存,尝试下试试吧。

注:上面的代码中颜色可以根据自己的喜好来修改。希望帮到你了。

 


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
发表我的评论换个身份
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3) 个小伙伴在吐槽
  1. 你好,默认模板的话要怎么改下拉菜单(当前版本 2.2 Prism Build 140101)
    /*-------------------------------导航栏--------------------------------*/
    #divNavBar{
    float:right;
    width:100%;
    height:36px;
    color:#fff;
    }
    #divNavBar h3{
    display:none;
    }
    #divNavBar ul{
    margin:0;
    padding:0 0 0 0;
    float:left;
    }
    #divNavBar li{
    float:left;
    padding:0 0 0 0;
    margin:0 0 0 0;
    font-size:1em;
    }
    #divNavBar a{
    float:left;
    margin:0 0 0px 0px;
    padding:7px 25px 7px 25px;
    text-decoration: none;
    line-height:22px;
    }
    #divNavBar a.on{
    color: white;
    background:#226bb8;
    }
    #divNavBar a:link {
    color: white;
    }
    #divNavBar a:visited {
    color: white;
    }
    #divNavBar a:hover {
    color:white;
    background: #226bb8;
    }
    #divNavBar a:active {
    color:white;
    background: #226bb8;
    }
    lifesongs 2014-05-20 AM 10:17 回复
    • 只需要把你说 的这段css替换为这篇文字提供的css样式就可以了。而且要保证原模板的导航处代码为我给你提供的就可以的。
      雨夜 2014-05-20 PM 12:06 回复
  2. 非常感谢,已经解决了。以后还得多来学习学习啊~
    mikezunya 2014-02-25 AM 08:53 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们