您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程

dedecms5.7下拉导航菜单教程

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

导读最近用了织梦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文件夹里。

本文标签:

很赞哦! ()

相关源码

  • (自适应响应式)黑色酷炫高端数码摄影pbootcms网站模板源码本模板基于PbootCMS开发,为摄影工作室、个人摄影师及摄影爱好者设计。采用深色系风格,突出摄影作品展示效果,适配各类数码设备浏览。适用于作品集展示查看源码
  • (自适应)APP应用软件落地页单页推广页网站模板下载基于PbootCMS内核开发的响应式单页模板,为企业产品展示、服务推广等应用场景设计。通过简洁直观的视觉布局与高效的技术架构,帮助用户快速构建专业级落地页面,实现移动端与PC端数据实时同步展示。查看源码
  • (自适应)绿色宠物门诊兽医行业网站模板该绿色清爽风格网站模板专为宠物门诊与兽医诊所设计,基于PbootCMS内核开发,采用响应式布局确保手机、PC等多端体验一致,帮助宠物医疗机构高效构建线上服务平台。查看源码
  • (自适应响应式)WORDwps办公资源教程资讯网站模板下载基于PbootCMS内核开发的响应式网站模板,为办公教程、WPS技巧分享、职场技能培训等场景打造。模板内置标准化文档分类体系,支持图文/视频教程混合展示,满足现代办公知识传播需求。查看源码
  • 自适应html5二极管LED灯具灯饰类企业网网站模板该PbootCMS内核开发的响应式模板专为LED照明、灯具制造类企业设计,通过HTML5技术实现手机与PC端自适应显示,确保跨设备访问体验一致。企业可快速替换图文内容适配其他工业领域查看源码
  • (PC+WAP)安保服务保安保镖模板免费下载本模板基于PbootCMS内核开发,为安保服务企业量身打造。设计风格严谨专业,突出安保行业的安全、可靠特性,展示企业服务项目与实力。采用响应式设计,PC与移动端数据同步,管理便捷。模板布局合理查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐