您现在的位置是：首页 > cms教程 > dedecms教程dedecms教程

dedecms5.7下拉导航菜单教程

危眺沃2023-12-26dedecms教程已有28人查阅

导读最近用了织梦CMS的较新版5.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 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文件夹里。

本文标签：

很赞哦！ (1)

上一篇：初识dedecms织梦模板内置的系统标记

下一篇：给dede织梦评论加上楼层号

暂无内容
暂无内容

相关教程

相关源码

  • (pc+wap)pbootcms网站模板蓝色小程序网站开发公司基于PbootCMS内核开发的营销型门户模板，为小程序开发公司、电商软件企业打造。采用HTML5自适应架构，实现PC与手机端数据实时同步展示查看源码
  • 深蓝色风景摄影机构网站(自适应多端)pbootcms模板该模板基于PbootCMS内核开发，专为风景摄影机构、户外摄影企业设计，采用深蓝色主题传递专业与艺术感，全栈响应式架构确保PC、平板、手机端无缝适配PHP程序结合轻量级SQLite数据库也可以更换MySQL数据库查看源码
  • 手机软件APP游戏软件下载网站Pbootcms模板(自适应)基于PbootCMS内核深度开发的网站模板，为移动互联网时代打造。无论是手机APP推广、游戏软件展示，还是各类企业官网需求，本模板都能通过简单的图文替换实现行业无缝切换查看源码
  • (PC+WAP)绿色产品环保设备垃圾桶厂家公司网站pbootcms模板为垃圾桶生产商、环保设备企业打造的高端响应式门户模板，基于PbootCMS开源内核深度开发。采用HTML5自适应架构，无缝实现PC与手机端数据实时同步与交互优化查看源码
  • pbootcms模板PC+WAP娱乐新闻资讯类博客网站源码该模板基于PbootCMS内核开发，专为娱乐新闻、健康生活类资讯网站设计，同时支持快速适配其他行业（如企业官网、博客门户等），仅需替换图文内容即可完成转型。查看源码
  • 自适应响应式绿色装修公司定制家居类pbootcms网站下载(自适应手机端)响应式全屋装修定制家居类网站pbootcms模板 绿色装修公司网站源码下载PbootCMS内核开发的网站模板，该模板适用于装修定制网站、装查看源码
暂无内容
暂无内容

图文教程

分享笔记 （共有 0 篇笔记）
昵称：
匿名发表 登录账号
         
验证码：

大家在看

织梦cms收费哪几款cms可以免费商用？
    暂无内容

本栏推荐

    暂无内容

相关标签

大家喜欢

    暂无内容