DEDECMS V5.7下拉导航菜单好代码教程

如玉的白玫瑰冰雪纯洁,闪烁着月光般寒冷的色彩玫瑰乱舞,勾勒出你的身形,你的容貌。想看日出,想看日落,想看世间每一处角落。

最近用了织梦CMS的最新版5.7做了个网站,发现系统默认的导航条不是很好看,也没有下拦菜单,感觉比较单调难看,如何美化下拉菜单?经本人调试成功,觉得效果不错,现在做个好代码教程与大家分享。
美化导航条步骤:
1.将下面这段代码贴到templets\default\footer.htm文件里(我是放在footer文件的最下面)
<!-- //二级子类
下拉菜单,考虑SEO原因放置于底部。
-->
<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/}" class="dropMenu">
  {dede:channel type='son' noself='yes'}  <li><a rel="nofollow noopener noreferrer" href="[field:typelink/]">[field:typename/]</a></li>
  {/dede:channel}
</ul>
{/dede:channelartlist}
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>
2.刷新网页发现已经神奇地出现了下拉菜单,但此时是透明的,因为缺少一个下拉菜单图片。
  把mmenubg.gif 放在/templets/default/images 里面,再刷新下看效果。(注:mmenubg.gif里的文字自己修改。)
3.此时你发现菜单与栏目不够适应,别急,可以调节css来达到相应的菜单宽度。
打开/templets/default/style/织梦模板.css文件(用记事本打开) 找到.dropMenu 这个就是控制导航条的。
看下面的代码:
/*-------- 下拉菜单 --------------*/
.dropMenu {
         position:absolute;
         top: 0;
         z-index:100;
         width: 120px;
         visibility: hidden;

红色代码就是控制下拉菜单的宽度,调整到自己满意的宽度。

4.把green_skin.png(已经蓝色化)、header_hover.png放在/templets/default/images文件夹里。

(本好代码教程转自官方论坛,感谢作者:织梦模板.com/u.php?uid=308">52ew 。)

到此这篇关于DEDECMS V5.7下拉导航菜单好代码教程就介绍到这了。积极思考造成积极人生,消极思考造成消极人生。更多相关DEDECMS V5.7下拉导航菜单好代码教程内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
dedecms如何实现任意页面调用当前会员信息的方

DedeCMS织梦判断是否有二级栏目输出HTML代码

织梦dedecms dede:arclist输出取消换行符

dedecms文章添加字段填栏目id,内容页调用字段里的栏目文章

dedeCMS首页列表页文章页调用tag的方法