zblog php下拉式导航条新的简单的实现方式

今天下夜班，想着下拉式导航是不是可以更方便，于是研究，看了下模块管理的分类模块以及看了系统文件c_system_event.php，看了下源码，一想并付诸行动，成功了。我顿时：呵呵。

虽然说是简单，但是还是要需要修改源码的（做模板的时候改下就可以了），好处是：

（1）以后不需要添加或者删除分类的时候手动在模块中添加分类链接等，

（2）以后可以自由改变导航的样式，可以是下拉式，也可是不用，而不需要更改源码。

（不废话了，呵呵）下面具体讲步骤：

1.找到模板中的导航条代码，以本站的模板为例：在文件header.php中找到如下代码：

<ul>{module:navbar}</ul>

更改为：（当然你可以把模块代码之前的内容或者后面的添加删除你想要的内容）

<ul><li><a href="{$host}">主页</a></li>{module:catalog}</ul>

2.保存后，打来本模板的样式表css，把找到导航条的样式表部分，比如本模板的是：

/*导航*/#nav{
  background: #3FA7CB ;height:28px;width:940px;line-height:35px;
  font-weight:normal;margin:0 auto; position:relative; z-index:10000;}#nav ul{height:28px;width:720px;float:left;}#nav li{
  float:left; line-height:28px;position: relative;height: 100%; width: auto; text-align:center;
 }#nav a{padding:0px 25px; display:block;color:#f8f8f8;font-weight:normal;}#nav a:hover{background:#0999cb;  text-decoration:none; color: #FFFFFF;}#nav ul ul {visibility:hidden;padding:0px 0px;width: auto;white-space:nowrap;font: 14px  'Microsoft Yahei',Verdana, Arial, Helvetica, sans-serif; background-color:#3FA7CB;} #nav ul li:hover ul,#nav ul a:hover ul{visibility:visible; margin:auto; } #nav ul ul li a{width: auto;margin:0;padding:0px 0px;color:#f8f8f8;font-weight:normal;line-height:28px;background: #3FA7CB;}

更改为如下代码：（也就是添加最后一小段）

/*导航*/#nav{
  background: #3FA7CB ;height:28px;width:940px;line-height:35px;
  font-weight:normal;margin:0 auto; position:relative; z-index:10000;}#nav ul{height:28px;width:720px;float:left;}#nav li{
  float:left; line-height:28px;position: relative;height: 100%; width: auto; text-align:center;
 }#nav a{padding:0px 25px; display:block;color:#f8f8f8;font-weight:normal;}#nav a:hover{background:#0999cb;  text-decoration:none; color: #FFFFFF;}#nav ul ul {visibility:hidden;padding:0px 0px;width: 102px;white-space:nowrap;font: 14px  'Microsoft Yahei',Verdana, Arial, Helvetica, sans-serif; background-color:#3FA7CB;} #nav ul li:hover ul,#nav ul a:hover ul{visibility:visible; margin:auto; } #nav ul ul li a{width: auto;margin:0;padding:0px 0px;color:#f8f8f8;font-weight:normal;line-height:28px;background: #3FA7CB;} #nav ul li ul li{float: left;line-height: 28px;position: relative;height: 100%;width: 110px;text-align: center;}

3.保存后，进入后台的模块管理---网站分类模块中的“样式”选择为：“UL嵌套型”，选择好之后点击提交。

4.刷新缓存，试试吧，如果样式有错位，只需要调整下css就可以了。

ps：如果下次你不想用这种下拉式的导航，那么你就可以进入网站分类模块，把样式选择为“普通型”的就可以了，本文只是个本站的实现方法和思路，希望对你有用，谢谢，今晚夜班，明天星期天不打算更新，休息休息。

本文链接：http://www.wstdnwx.com/?id=288 转载需授权！