您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程
dedecms5.7下拉导航菜单教程
危眺沃2023-12-26DedeCMS教程已有人查阅
导读最近用了织梦CMS的较新版5.7做了个网站,发现系统默认的导航条不是很好看,也没有下拦菜单,感觉比较单调难看,如何美化下拉菜单?经本人调试成功
最近用了织梦CMS的较新版5.7做了个网站,发现系统默认的导航条不是很好看,也没有下拦菜单,感觉比较单调难看,如何美化下拉菜单?经本人调试成功,觉得效果不错,现在做个教程与大家分享。
美化导航条步骤:
1.将下面这段代码贴到templets\default\footer.htm文件里(我是放在footer文件的最下面)
把mmenubg.gif 放在/templets/default/images 里面,再刷新下看效果。(注:mmenubg.gif里的文字自己修改。)
3.此时你发现菜单与栏目不够适应,别急,可以调节css来达到相应的菜单宽度。
打开/templets/default/style/织梦模板.css文件(用记事本打开) 找到.dropMenu 这个就是控制导航条的。
看下面的代码:
4.把green_skin.png(已经蓝色化)、header_hover.png放在/templets/default/images文件夹里。
美化导航条步骤:
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文件夹里。
本文标签:
很赞哦! ()
下一篇:给dede织梦评论加上楼层号
相关教程
图文教程
两种方法实现dedecms栏目信息统计功能
我知道织梦CMS的后台,可以统计出网站的文章数量信息,但是不能显示每个栏目的文章统计信息,以下是两种可以实现栏目文章统计信息的方法
dede织梦定时发布插件,dede定时审核插件织梦插件
dede定时发布插件即dede定时审核插件分享,本插件由织梦网站建设公司www.ebingou.cn代码号发布。主要适用于dede织梦5.7版本的定时发布,定时审核
dede织梦5.7sp1怎么实现下拉菜单自动调用
一、你自己网站正在用的模板的head.htm二、你自己网站正在用的模板的footer.htm或者index.htm,head.htm等等均可,这里推荐footer.htm。
织梦模板中的友情连接写死到每个页面的解决方法
DEDE的模板,但是有一个连接写死到每一个页面去,找不到在哪里修改,还有一个栏目调用的名称也需要修改下下。
相关源码
-
响应式WordPress简约博客主题Alt_BlogAlt_Blog主题该模板为博客内容展示设计,采用简约现代的风格理念,打造清晰的内容呈现平台。响应式布局确保在不同设备上都能获得良好的浏览体验,帮助博主更好地展示和分享内容。查看源码 -
(自适应)蓝色英文外贸电子科技产品带三级栏目网站模板为外贸企业设计的英文网站模板,基于PbootCMS系统开发。突出多语言支持和国际化布局,三级栏目结构清晰展示产品分类,响应式设计确保更好客户在移动端和PC端获得一致的专业体验。查看源码 -
(自适应)驾校培训学车活动免费pbootcms源码下载本模板基于PbootCMS内核开发,为驾校培训行业打造,具备完善的招生展示、课程预约、教练团队展示等功能模块。响应式设计适配各类移动终端,数据实时同步管理,助您高效开展线上业务。查看源码 -
帝国CMS7.5H5小游戏模板游戏攻略下载网整站源码本模板基于帝国CMS系统开发,为H5小游戏和APP应用资讯类网站设计。模板架构针对小游戏行业特点优化,支持游戏发布、资讯分享、应用推荐等功能,满足各类小游戏门户网站的建设需求。查看源码 -
(PC+WAP)聚氨酯粉末涂料防腐耐用材料粘合剂网站源码下载为化工涂料企业设计的展示系统,集成产品技术参数库、颜色样板展示器和配方查询模块。支持粉末涂料、环氧树脂等多类产品分类展示查看源码 -
(自适应)家政保洁保姆打扫卫生清灰服务pbootcms模板免费下载采用手工编写的DIV+CSS架构,代码结构清晰无冗余,加载速度优异。响应式设计适配各类终端设备,保障手机、平板、电脑端的一致浏览体验。查看源码
| 分享笔记 (共有 篇笔记) |
