注册 登录 天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制

教程

分享一些有关于zblog的教程,这里有zblog初级教程、zblog中级教程和zblog进阶版教程,如果对你有所帮助,深感荣幸

当前位置:网站首页 教程 正文

dedecms V5.7实现二级栏目下拉菜单的方法(亲测不是转载的)

天兴工作室管理 2013-03-07 教程 5164 ℃ 3 评论

天兴通讯主站用的是dedecms,栏目分类很多,有很多二级栏目。今天突然心血来潮准备把这些二级栏目搞一个下拉菜单,dedecms之前的版本是自带这个功能的,后来不晓得为什么新版本就把这个功能取消掉了,但是js文件和css都还在,于是百度之。

出来的搜索结果打开一看全都是一模一样,很明显全是是转载的。(我起码看了20篇左右,真的是一模一样啊,一个字没改的,汗!)

我个人整理的方法步骤如下:

第一步:在模板文件夹里面找到“footer.html”文件,在里面任意位置加上这些代码:

<script type=’text/javascript’ src=’{dede:global.cfg_cmsurl/}/images/js/dropdown.js’></script>
{dede:channelartlist typeid=’top’ cacheid=’channelsonlist’}<ul id=”dropmenu{dede:field.typeid/}”>
{dede:channel type=’son’ noself=’yes’}  <li><a href=”[field:typelink/]“>[field:typename/]</a></li>
{/dede:channel}
</ul>
{/dede:channelartlist}
<script type=”text/javascript”>cssdropdown.startchrome(“navMenu”)</script>

第二步:如果你修改了dedecms默认的css文件“dedecms.css”,那么你必须保证css里面有以下css代码:

.dropMenu{position:absolute;top:0;z-index:100;width:80px;visibility:hidden;margin-top:-1px;border:1px solid #036;border-top:0 solid #3CA2DC;background-color:#FFF;padding-top:6px;padding-bottom:6px;}.dropMenu li{margin-top:2px;margin-bottom:4px;padding-left:0;}.dropMenu a{width:auto;display:block;color:#000;padding:2px 0 2px 1.2em;}* html .dropMenu a{width:100%;}.dropMenu a:hover{color:red;text-decoration:underline;}

第三步:更新首页看一下,效果已经出来了,然后只需根据自己的页面需求修改css即可。

如果你刷新了还是没有出现效果,那么你肯定是和我一样修改了导航部分的代码。经过我研究了半天发现了其实是这样的:

1、首先你要确定你的导航代码是这样的

{dede:channel type='top' row='10' currentstyle="<li class='hover'><a href='~typelink~' ~rel~><span>~typename~</span></a></li>"} <li><a href='[field:typeurl/]' [field:rel/]><span>[field:typename/]</span></a></li> {/dede:channel}

2、同时还要确定你导航必须要放在一个id为“navMenu”的div里面,class可以自己定义。

3、要确保你网站有这个js文件“/images/js/dropdown.js”。

好了,确保上面三点后你的下拉菜单绝对出来了对不对?如果还没有出来!请自行研究或者测试下你的人品。

赞 (1)

已有 3 位小伙伴发表了看法

智慧城市之家

回应ta智慧城市之家 (游客)

评论于 2016-11-24 10:19:12

这个,写的比其他都要详细;但是但是但是我首页代码导航不是这样的,修改的话就出错,这个可怎么搞呢
智慧城市之家

回应ta智慧城市之家 (游客)

评论于 2016-11-24 10:20:08

www.zhcszj.com 这个是我的站,刚弄的;我啥也不懂代码,很想弄个二级栏目下拉的模式,哎;不知道怎么搞
3DCG之家

回应ta3DCG之家 (游客)

评论于 2013-03-31 00:34:24

很好的文章啊,我的图片站最近想弄一个下拉菜单,找了很多方法正如作者所说呀,普遍一样呢!楼主独树一帜,有前途哦!本人小站 www.3dcgs.com,欢迎光临呀。嗯,你的文章很好呀,我转走了啦!

欢迎 发表评论

服务项目

快速入口

常见问题

天兴工作室 | www.txcstx.cn

天兴工作室介绍天兴工作室承接:网站建设、zblog模板和dedecms模板定制、仿站(像素级仿站)、html单页面定制和修改、网站模板修改等服务;我们的办事准则:要么不答应、答应则一定做到

  • 交流群:ZBLOG交流群
  • 客户群:天兴工作室客户群
在线QQ 评论文章