ZBlogger技术交流中心

 找回密码
 注册

QQ登录

只需一步,快速开始

Z-BlogPHP 最新开发动态 下载最新版:Z-BlogPHP 1.5 Zero Wordpress转换 - Emlog转换 - 找回密码

Z-BlogASP 最新开发动态 下载最新版:Z-Blog 2.2 Prism Build 140101 转换到Z-BlogPHP - 1.8升级指南 - 找回密码

DBS官方主机/域名/VPS 推荐:Z-BlogPHP主机-Z-BlogASP主机 联系值班客服(每天9:00-21:30)

搜索
【聚划算】宅男最新神器!你懂的!环球外贸论坛
查看: 4782|回复: 12

Z-BLOG2.1下拉导航的实现

[复制链接]
发表于 2013-4-4 22:25:56 | 显示全部楼层 |阅读模式
本帖最后由 shuiniu 于 2013-4-4 22:28 编辑

本下拉导航的实现在是清与新略图主题上实现的,感谢原作者名仕
(如果你经常换风格,可以飘过了,不用继续往下读了。)
下面说一下我的实现方法,也许比较烦琐,也许还有许多错误,还望大家不要笑话,毕竟我也只是一只菜鸟。
1、打开数据库zb_users\DATA,找到表blog_Function,找到第一行“导航栏”,手动修字段fn_Ftype的值为“div”(没有找到在后台可以修改的地方,后台默认为“UL",并且是不可选的,只好开数据库了。)
2、打开“zb_users\THEME\vming\TEMPLATE“目录(前提是你已安装了“清与新略图主题”),将TOP.HTM复制备份一下(为以后还原做好准备。)然后将TOP.HTM的代码改为:
  1. <section class="head_top">
  2. <section class="logowrap">
  3. <section class="logo">
  4. <h1><a href="<#ZC_BLOG_HOST#>"><#ZC_BLOG_NAME#></a></h1>
  5. <h3><#ZC_BLOG_SUB_NAME#></h3>
  6. </section>
  7. <section class="head_right">
  8. <section class="head_r_ad"><#TEMPLATE_INCLUDE_TOPNOTICE#></section>
  9. </section>
  10. <div class="clear"></div>
  11. </section>
  12. </section>
  13. <section class="header_nav">
  14. <div class="menu">
  15. <ul>
  16. <#CACHE_INCLUDE_NAVBAR#>
  17. </ul>
  18. </div>
  19. </section>
  20. </header>
复制代码
<div class="menu">
<ul>
<#CACHE_INCLUDE_NAVBAR#>
</ul>
</div
红色部分为变动的地方。修改以后记得保存哟。
3、打开zb_users\THEME\vming\STYLE目录(前提是你已安装了“清与新略图主题”,又啰嗦一下),也是要将MingShi-Index.css备份一个,以防不测。然后打开它,在“/*导航*/”前加入(当然你也可以放入其它地方,放在这里主要是为了方便对照)以下代码:
  1. /*下拉导航*/
  2. .menu{font-size:14px;position:relative;z-index:100;width:960px;margin:0 auto;color: #fff;text-align:center;line-height:30px;text-shadow: 0 1px 0 #003b57;font-family: 微软雅黑;}
  3. .menu ul{list-style:none;padding:5px 0px;}
  4. .menu li {float:left;position:relative;height:30px;color: #fff;width:80px;}
  5. .menu ul ul {visibility:hidden;position:absolute;left:0px;top:35px;height:30px;}
  6. .menu table {position:absolute; top:0; left:0;}
  7. .menu ul li:hover ul,
  8. .menu ul a:hover ul{visibility:visible;text-shadow: 2px 2px 5px #003B57;}
  9. .menu a{padding:5px 10px;display:block;text-decoration:none;color: #fff;}
  10. .menu a:hover{background:#0086a3;color: #00e9f0;text-shadow: 2px 2px 5px #003B57;background-position:0 -101px;border:0px;font-weight: bold;}
  11. .menu ul ul{}
  12. .menu ul ul li {clear:both;text-align:left;font-size:14px;height:30px;}
  13. .menu ul ul li a{background:#00638d;display:block;width:100px;height:20px;margin:0;height:30px;}
  14. .menu ul ul li a:hover{text-shadow: 2px 2px 5px #003B57;background-position:0 -101px;font-weight: bold;}
复制代码
当然,你可以根据你的需要进行修改,比如颜色,阴影,行距,字体等之类的,我这个主要是保持原味。{:soso_e100:}
4、进入后台,侧栏管理——导航栏,添加导航内容。在这里也需要注意的是如果直接通过分类管理里的加入导航是不行的。还是给一个样例吧:
  1. <li>
  2. <a href="/">首页
  3. </li>
  4. <li>
  5. <a href="catalog.asp?cate=1">三中校园
  6. <!--[if IE 7]><!--></a><!--<![endif]-->
  7. <!--[if lte IE 6]><table><tr><td><![endif]-->
  8. <ul>
  9. <li><a href="catalog.asp?cate=2">通知公告</a></li>
  10. <li><a href="catalog.asp?cate=3">教育新闻</a></li>
  11. <li><a href="catalog.asp?cate=4">校园风光</a></li>
  12. </ul>
  13. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  14. </li>

  15. <li>
  16. <a href="catalog.asp?cate=5">教学资源
  17. <!--[if IE 7]><!--></a><!--<![endif]-->
  18. <!--[if lte IE 6]><table><tr><td><![endif]-->
  19. <ul>
  20. <li><a href="catalog.asp?cate=6">教案课件</a></li>
  21. <li><a href="catalog.asp?cate=7">试卷习题</a></li>
  22. <li><a href="catalog.asp?cate=8">教学资源</a></li>
  23. </ul>
  24. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  25. </li>

  26. <li>
  27. <a href="catalog.asp?cate=9">课改在线
  28. <!--[if IE 7]><!--></a><!--<![endif]-->
  29. <!--[if lte IE 6]><table><tr><td><![endif]-->
  30. <ul>
  31. <li><a href="catalog.asp?cate=10">课改案例</a></li>
  32. <li><a href="catalog.asp?cate=11">进程跟踪</a></li>
  33. <li><a href="catalog.asp?cate=12">课堂记载</a></li>
  34. </ul>
  35. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  36. </li>

  37. <li>
  38. <a href="catalog.asp?cate=13">电脑应用
  39. <!--[if IE 7]><!--></a><!--<![endif]-->
  40. <!--[if lte IE 6]><table><tr><td><![endif]-->
  41. <ul>
  42. <li><a href="catalog.asp?cate=14">操作系统</a></li>
  43. <li><a href="catalog.asp?cate=15">办公软件</a></li>
  44. <li><a href="catalog.asp?cate=16">其它应用</a></li>
  45. </ul>
  46. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  47. </li>

  48. <li>
  49. <a href="catalog.asp?cate=17">软件下载
  50. <!--[if IE 7]><!--></a><!--<![endif]-->
  51. <!--[if lte IE 6]><table><tr><td><![endif]-->
  52. <ul>
  53. <li><a href="catalog.asp?cate=18">操作系统</a></li>
  54. <li><a href="catalog.asp?cate=19">应用软件</a></li>
  55. <li><a href="catalog.asp?cate=20">其它软件</a></li>
  56. </ul>
  57. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  58. </li>

  59. <li>
  60. <a href="catalog.asp?cate=21">网海拾贝
  61. <!--[if IE 7]><!--></a><!--<![endif]-->
  62. <!--[if lte IE 6]><table><tr><td><![endif]-->
  63. <ul>
  64. <li><a href="catalog.asp?cate=22">网络文摘</a></li>
  65. <li><a href="catalog.asp?cate=23">精典技巧</a></li>
  66. <li><a href="catalog.asp?cate=24">图解天下</a></li>
  67. </ul>
  68. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  69. </li>


  70. <li>
  71. <a href="catalog.asp?cate=25">站点收藏
  72. <!--[if IE 7]><!--></a><!--<![endif]-->
  73. <!--[if lte IE 6]><table><tr><td><![endif]-->
  74. <ul>
  75. <li><a href="catalog.asp?cate=26">水牛书签</a></li>
  76. <li><a href="catalog.asp?cate=27">酷站推荐</a></li>
  77. </ul>
  78. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  79. </li>
复制代码
我用的是动态的,里面的链接自己改吧。关键是<li>里不带样式了,同时下级导航要放入<ul></ul>里面。
5、上图吧:
搜狗截图13年04月04日2218_1.png
搜狗截图13年04月04日2218_2.png
搜狗截图13年04月04日2218_3.png

如果你喜欢的话,就动手吧,不喜欢就飘过了。见笑了。
回复

使用道具 举报

发表于 2013-4-6 18:13:04 | 显示全部楼层
感谢分享好贴
回复 支持 反对

使用道具 举报

发表于 2013-4-6 23:13:18 | 显示全部楼层
非常漂亮
感谢分享。。。
回复 支持 反对

使用道具 举报

发表于 2013-4-7 20:07:23 | 显示全部楼层
不错啊!!谢谢了,呆会研究下
回复 支持 反对

使用道具 举报

发表于 2013-4-7 22:25:31 | 显示全部楼层
学到了。继续努
力中了,好好学习下
回复 支持 反对

使用道具 举报

发表于 2013-4-11 15:34:43 | 显示全部楼层
很好的分享,只是动用数据库了,生手勿动哈,
回复 支持 反对

使用道具 举报

发表于 2013-4-17 14:08:54 | 显示全部楼层
如果做企业站的话很实用
回复 支持 反对

使用道具 举报

发表于 2013-6-12 14:32:11 | 显示全部楼层
怎么打开数据库呢?文件管理和ftp都是空白······
回复 支持 反对

使用道具 举报

发表于 2013-6-12 15:25:01 | 显示全部楼层
照做了,没效果呢?
回复 支持 反对

使用道具 举报

发表于 2013-7-18 11:08:30 | 显示全部楼层
学习了 非常需要!!
回复 支持 反对

使用道具 举报

发表于 2013-11-8 13:21:42 | 显示全部楼层
新手还是做不来
回复 支持 反对

使用道具 举报

发表于 2015-1-11 10:58:44 | 显示全部楼层
谢谢了~正好要用!
回复 支持 反对

使用道具 举报

发表于 2015-5-12 16:45:39 | 显示全部楼层
收藏了,多谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|ZBlogger技术交流中心 ( 鄂ICP备11007414号 鄂公网安备 42060602000101号 )

GMT+8, 2019-3-25 01:59 , Processed in 0.024884 second(s), 8 queries , APCu On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表