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

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

雨夜 3509次浏览 5个评论

今天下夜班,想着下拉式导航是不是可以更方便,于是研究,看了下模块管理的分类模块以及看了系统文件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:如果下次你不想用这种下拉式的导航,那么你就可以进入网站分类模块,把样式选择为“普通型”的就可以了,本文只是个本站的实现方法和思路,希望对你有用,谢谢,今晚夜班,明天星期天不打算更新,休息休息。


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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5) 个小伙伴在吐槽
  1. 1.为啥导航栏的会另取一行,而且第二行的字是白色的
    2.友情链接不知去哪儿了
    3.评论的内容不知去向
    求大神解决
    小鹭 2014-05-24 PM 09:19 回复
    • 这是因为css没有调整好的问题: 1.导航条的项目超过一定的数目后会自动出现第二行,而第二行为什么是白字,它原本属于第一行,css设置了白字,如果设置得当的话,自动回到第一行就不会出现这种问题了。 2.友情链接是需要自己添加的,这种方法的缺陷也在这里,需要自己手动添加,和主页类此。 3.不知道你说的评论内容是什么意思。 谢谢多提意见。
      雨夜 2014-05-25 AM 08:32 回复
  2. 1.为啥导航栏的会另取一行,而且第二行的字是白色的
    2.友情链接不知去哪儿了
    3.评论的内容不知去向
    求大神解决
    小鹭 2014-05-24 PM 09:19 回复
  3. 这两天一直在弄VPS的问题,从IIS换到Apache2又换到Nginx 最后换到Kangle !!我去啊,累死了,感觉就是Kangle了,一点问题都没~其他的自己配置起来老是有中文乱码的问题!我去,悲剧了2天
    大谋 2014-05-18 PM 11:27 回复
    • 呵呵
      雨夜 2014-05-20 PM 12:16 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们