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

Z-blog导航栏修改为下拉式导航栏的一种方法

雨夜 7544次浏览 8个评论

注:本文以林肆的最新asp版模板simline为例

由于本站的分类比较多,都排在以前的导航栏上有点拥挤,而且多的情况下会出现错位的情况,所以想寻找有没有修改的办法,所以我开始在网站寻找方法,重要在z-blog论坛上http://bbs.rainbowsoft.org/thread-80894-1-1.html找到个方法。首先谢谢他,给我了灵感和方法,但和他有点不同,我只是改了下css和导航栏模块代码,对于模板并没有修改,由于自己也是个新手,所以到处尝试,弄了半天时间。终于弄成现在的效果,希望对大家有所帮助。

1)之前的没有下拉效果:

 

(2)修改成功后的效果:

 

过程:

1.修改对应模板下的css文件。

找到css文件的导航栏的下面的代码如下:(所有的#nav全部换成下面的代码)

#nav{
  background:#777;height:28px;width:940px;line-height:35px;
  font-weight:normal;margin:0 auto;}
#nav ul{height:28px;width:720px;float:left;}
#nav li{
  float:left; line-height:28px;position:relative;
  line-height:30px\9;}
#nav a{padding:0px 25px; display:block;color:#f8f8f8;font-weight:normal;}
#nav a:hover{height:28px\9;background:#555;text-decoration:none;}

替换代码是::

#nav{

  background:#777;height:28px;width:974px;

  font-weight:normal;margin:0 auto;}

  /*设置导航条长度(从左边到搜索框的距离width)*/

#nav ul{height:28px;width:760px;float:left;}

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

#nav a:hover{background:#555;text-decoration:none;}

/*子导航竖排*/

#nav li {position: relative;height: 100%;color:#fff;width:102px; text-align:center;
 font:'Microsoft Yahei';

              float: left; line-height:28px;} 

#nav ul ul {visibility:hidden;padding:0px 0px;width: auto;white-space:nowrap;
font: 14px  'Microsoft Yahei',Verdana, Arial, Helvetica, sans-serif;} 

#nav ul li:hover ul,

#nav ul a:hover ul{visibility:visible; margin:auto;} 

#nav ul ul li a{width:102px;margin:0;padding:0px 0px;color:#f8f8f8;
font-weight:normal;line-height:28px;background:#777777;}

保存退出MD软件。【上面的代码可以自己根据自己的模板自行修改参数】

2.修改导航栏模块代码:[例子]

 

比如我的以前的模板代码如下:

<li id="menu-1"><a href="https://www.tusay.net/">首页</a></li>

<li id="menu-cate-15"><a href="https://www.tusay.net/catalog.asp?cate=15">XP</a></li>

<li id="menu-cate-16"><a href="https://www.tusay.net/catalog.asp?cate=16">Win 7</a></li>

<li id="menu-cate-17"><a href="https://www.tusay.net/catalog.asp?cate=17">多系统</a></li>

<li id="menu-cate-18"><a href="https://www.tusay.net/catalog.asp?cate=18">网络连接</a></li>

<li id="menu-cate-19"><a href="https://www.tusay.net/catalog.asp?cate=19">故障处理</a></li>

<li id="menu-cate-20"><a href="https://www.tusay.net/catalog.asp?cate=20">其他</a></li>

<li id="menu-page-18"><a href="https://www.tusay.net/link.html">链接</a></li>

<li id="menu-page-19"><a href="https://www.tusay.net/guestbook.html">留言</a></li>

<li id="menu-cate-21"><a href="https://www.tusay.net/catalog.asp?cate=21">系统网络</a></li>

现在你要把xp,win7,win7-xp,系统网络四个栏作为子栏目,那么就只需要更改代码添加<ul></ul>即可。如下面的代码红色部分。

<li id="menu-1"><a href="https://www.tusay.net/">首页</a></li>

<li id="menu-cate-21"><a href="https://www.tusay.net/catalog.asp?cate=21">系统网络</a>

<ul>

<li id="menu-cate-15"><a href="https://www.tusay.net/catalog.asp?cate=15">XP</a></li>

<li id="menu-cate-16"><a href="https://www.tusay.net/catalog.asp?cate=16">Win 7</a></li>

<li id="menu-cate-17"><a href="https://www.tusay.net/catalog.asp?cate=17">多系统</a></li>

<li id="menu-cate-18"><a href="https://www.tusay.net/catalog.asp?cate=18">网络连接</a></li>

</ul>

</li>

<li id="menu-cate-19"><a href="https://www.tusay.net/catalog.asp?cate=19">故障处理</a></li>

<li id="menu-cate-20"><a href="https://www.tusay.net/catalog.asp?cate=20">其他</a></li>

<li id="menu-page-18"><a href="https://www.tusay.net/link.html">链接</a></li>

<li id="menu-page-19"><a href="https://www.tusay.net/guestbook.html">留言</a></li>

说明:

<li><ul>...</ul><l/i>

把需要做子栏的项目包起来,成列显示。

修改完成后,提交下,然后文件重建下就可以了。

 


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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8) 个小伙伴在吐槽
  1. 看了几个页面,感觉文章内页,相关文章,改成文字的就好了!用图片,在手机上显示的有点拥挤,不分彼此的感觉~
    shilyblog 2014-09-28 AM 06:47 回复
  2. 卢松松模版有点不知道从哪里下手
    永远的大叔 2014-09-21 PM 07:19 回复
  3. 站长您好!我按照您的方法来修改自己的卢松松模板,可是太笨,没能改好。已发送邮件至tusaynet@163.com。请帮忙抽空看看,热切盼望您的回复!
    钓鱼社 2014-06-21 PM 12:09 回复
    • 本站已经发布了关于贵站的代码的修改的文章,请到本站相关位置查看,呵呵,欢迎常来。
      雨夜 2014-06-21 PM 10:16 回复
  4. 你可以看下我给你的解答:http://www.tusay.net/archives/metro-%E4%B8%8B%E6%8B%89%E5%AF%BC%E8%88%AA.html
    雨夜 2014-02-25 AM 07:04 回复
  5. 我想问下,我是Powered By Z-BlogPHP 1.2 Hippo Build 140220这个版本,也想修改你这样的导航。发现代码不通用了。如何修改?想跟你学习学习。
    mike 2014-02-25 AM 04:51 回复
    • 你可以看下我给你的解答:http://www.tusay.net/archives/metro-%E4%B8%8B%E6%8B%89%E5%AF%BC%E8%88%AA.html
      雨夜 2014-02-25 AM 07:04 回复
  6. 呵呵,我也是瞎折腾,呵呵。慢慢学习,呵呵
    雨夜 2014-01-19 AM 04:24 回复
  7. 恭喜,技术又精进了。我就是当初懒得折腾,所以觉得WP自带这个功能蛮方便的。你这个我就参考了,以后用ZB的话,也必须要改。
    Frank 2014-01-18 PM 09:52 回复
    • 呵呵,我也是瞎折腾,呵呵。慢慢学习,呵呵
      雨夜 2014-01-19 AM 04:24 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们