zblog2.1实现下拉导航教程

一次就够

本下拉导航的实现在是清与新略图主题上实现的，感谢原作者名仕。
（如果你经常换风格，可以飘过了，不用继续往下读了）

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>

    红色部分为变动的地方。修改以后记得保存哟。

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;}

当然，你可以根据你的需要进行修改，比如颜色，阴影，行距，字体等之类的，我这个主要是保持原味。

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>

上图：