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

用户 shuiniu 2013-4-4 4888

本帖最后由 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的代码改为:
<section class="head_top">
<section class="logowrap">
<section class="logo">
<h1><a href="<#ZC_BLOG_HOST#>"><#ZC_BLOG_NAME#></a></h1>
<h3><#ZC_BLOG_SUB_NAME#></h3>
</section>
<section class="head_right">
<section class="head_r_ad"><#TEMPLATE_INCLUDE_TOPNOTICE#></section>
</section>
<div class="clear"></div>
</section>
</section>
<section class="header_nav">
<div class="menu">
<ul>
<#CACHE_INCLUDE_NAVBAR#>
</ul>
</div>
</section>
</header>
<div class="menu">
<ul>
<#CACHE_INCLUDE_NAVBAR#>
</ul>
</div
红色部分为变动的地方。修改以后记得保存哟。
3、打开zb_users\THEME\vming\STYLE目录(前提是你已安装了“清与新略图主题”,又啰嗦一下),也是要将MingShi-Index.css备份一个,以防不测。然后打开它,在“/*导航*/”前加入(当然你也可以放入其它地方,放在这里主要是为了方便对照)以下代码:
/*下拉导航*/
.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: 微软雅黑;} 
.menu ul{list-style:none;padding:5px 0px;} 
.menu li {float:left;position:relative;height:30px;color: #fff;width:80px;} 
.menu ul ul {visibility:hidden;position:absolute;left:0px;top:35px;height:30px;} 
.menu table {position:absolute; top:0; left:0;} 
.menu ul li:hover ul, 
.menu ul a:hover ul{visibility:visible;text-shadow: 2px 2px 5px #003B57;} 
.menu a{padding:5px 10px;display:block;text-decoration:none;color: #fff;} 
.menu a:hover{background:#0086a3;color: #00e9f0;text-shadow: 2px 2px 5px #003B57;background-position:0 -101px;border:0px;font-weight: bold;} 
.menu ul ul{} 
.menu ul ul li {clear:both;text-align:left;font-size:14px;height:30px;} 
.menu ul ul li a{background:#00638d;display:block;width:100px;height:20px;margin:0;height:30px;} 
.menu ul ul li a:hover{text-shadow: 2px 2px 5px #003B57;background-position:0 -101px;font-weight: bold;} 
当然,你可以根据你的需要进行修改,比如颜色,阴影,行距,字体等之类的,我这个主要是保持原味。{:soso_e100:}
4、进入后台,侧栏管理——导航栏,添加导航内容。在这里也需要注意的是如果直接通过分类管理里的加入导航是不行的。还是给一个样例吧:
<li>
<a href="/">首页
</li>
<li>
<a href="catalog.asp?cate=1">三中校园
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="catalog.asp?cate=2">通知公告</a></li>
<li><a href="catalog.asp?cate=3">教育新闻</a></li>
<li><a href="catalog.asp?cate=4">校园风光</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<a href="catalog.asp?cate=5">教学资源
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="catalog.asp?cate=6">教案课件</a></li>
<li><a href="catalog.asp?cate=7">试卷习题</a></li>
<li><a href="catalog.asp?cate=8">教学资源</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

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

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

<li>
<a href="catalog.asp?cate=17">软件下载
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="catalog.asp?cate=18">操作系统</a></li>
<li><a href="catalog.asp?cate=19">应用软件</a></li>
<li><a href="catalog.asp?cate=20">其它软件</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

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


<li>
<a href="catalog.asp?cate=25">站点收藏
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="catalog.asp?cate=26">水牛书签</a></li>
<li><a href="catalog.asp?cate=27">酷站推荐</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
我用的是动态的,里面的链接自己改吧。关键是<li>里不带样式了,同时下级导航要放入<ul></ul>里面。
5、上图吧:




如果你喜欢的话,就动手吧,不喜欢就飘过了。见笑了。
最新回复 (12)
全部楼主
  • 用户 ooniu 2013-4-6 0
    引用 2
    感谢分享好贴
  • 用户 545228146 2013-4-6 0
    引用 3
    非常漂亮
    感谢分享。。。

    我不敢说我和谁关系很

  • 用户 kakale 2013-4-7 0
    引用 4
    不错啊!!谢谢了,呆会研究下
  • 用户 午后红茶 2013-4-7 0
    引用 5
    学到了。继续努
    力中了,好好学习下
  • 用户 xlyuan 2013-4-11 0
    引用 6
    很好的分享,只是动用数据库了,生手勿动哈,
  • 用户 左手写爱 2013-4-17 0
    引用 7
    如果做企业站的话很实用
  • 用户 muchen888 2013-6-12 0
    引用 8
    怎么打开数据库呢?文件管理和ftp都是空白······
  • 用户 muchen888 2013-6-12 0
    引用 9
    照做了,没效果呢?
  • 用户 chjun8271 2013-7-18 0
    引用 10
    学习了 非常需要!!
  • 用户 Lover~凯撒 2013-11-8 0
    引用 11
    新手还是做不来

    www.xieruoyao.com

  • 用户 karlevi 2015-1-11 0
    引用 12
    谢谢了~正好要用!
  • 用户 adam2015 2015-5-12 0
    引用 13
    收藏了,多谢
    • ZBlogger技术交流中心
      14
          
返回
发新帖