您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程
dede织梦5.7sp1怎么实现下拉菜单自动调用
翠风2023-12-08DedeCMS教程已有人查阅
导读一、你自己网站正在用的模板的head.htm二、你自己网站正在用的模板的footer.htm或者index.htm,head.htm等等均可,这里推荐footer.htm。
一、你自己网站正在用的模板的head.htm
提醒:这里首页必须用id="navMenu",在css表格里吧头部的id或者class更改为默认这个。
二、你自己网站正在用的模板的footer.htm或者index.htm,head.htm等等均可,这里推荐footer.htm。
在页面上添加如下java代码,全部复制黏贴即可。
寻找.dropMenu 这个类,复制他的所有代码到你自己的css中,
你也可以直接复制下面的代码到你的css中。
<div id="navMenu">
<ul>
<li><a href="{dede:global.cfg_indexurl/}">首页</a> </li>
{dede:channel row='10' type ='top'}
<li><a href="[field:typeurl/]" [field:rel/]>[field:typename/]</a></li></li>
{/dede:channel}
</ul>
</div>
我们只要注意黑色的这一行,这个是输出导航栏栏目的,需要在这里添加上红色的部分[field:rel/] 你想要更多样式需要你自己慢慢测试了。提醒:这里首页必须用id="navMenu",在css表格里吧头部的id或者class更改为默认这个。
二、你自己网站正在用的模板的footer.htm或者index.htm,head.htm等等均可,这里推荐footer.htm。
在页面上添加如下java代码,全部复制黏贴即可。
<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>
三、到templets\default\style 中打开dedecms.css寻找.dropMenu 这个类,复制他的所有代码到你自己的css中,
你也可以直接复制下面的代码到你的css中。
.dropMenu {
position:absolute;
top: 0;
z-index:100;
width: 80px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CaCaCa, direction=135, strength=4);
margin-top: -1px;
border: 3px solid #FF0000;
border-top: 0px solid #3Ca2DC;
background-color: #FFF;
background:url(templets/sdgwy/index_files/mmenubg.gif);
padding-top:6px;
padding-bottom:6px;
}
.dropMenu li {
margin-top:2px;
margin-bottom:4px;
padding-left:6px;
}
.dropMenu a {
width: auto;
display: block;
color: black;
padding: 2px 0 2px 1.2em;
}
* html .dropMenu a {
width: 100%;
}
.dropMenu a:hover {
color:red;
text-decoration: underline;
}
当然这里面可以修改下拉菜单样式,这个可以自己调试,包括下拉的背景色。经过上面的三步后,你的dede下拉菜单功能就实现了,相信对你很有帮助的。
本文标签:
很赞哦! ()
相关教程
图文教程
dede织梦调用所有分类及分类下内容标签的方法
看到一个不错的单本小说站的界面,准备用DEDECMS仿出来,首页的效果是展示小说的所有章节及章节下的所有的标题内容。这就需要用到调用分类及分类下的内容。
dedecms5.6后台设置验证码开关无效的解决方法
最近想把网站的验证码关掉,在网上查阅了下,可以直接在网站的后台关掉,于是操作了下。但是前台依然出现验证码,经过再次搜寻,找到以下解决方案。
dede织梦广告用标签调用和用JS调用两者之间的区别
对于刚接触织梦的新手来说,发现织梦的广告管理里面有两种广告的调用形式,至于这两种广告形式各有什么优势,哪种更适合自己就不是很明白了。
dedecms列表页自动统计当前栏目文档总数的方法
今天在百度知道看到一个关于列表页自动统计当前栏目文档总数的方法的提问,借此整理下,分享一下方法给大家,希望对大家有所帮助。
相关源码
-
(自适应)工商代理公司注册财务会计pbootcms模板免费下载为工商代理、财务会计服务企业设计的网站模板,基于PbootCMS开发,充分考虑了企业服务行业的展示需求与客户转化路径。设计风格专业严谨,布局清晰合理,呈现企业服务内容与专业优势。查看源码 -
(PC+WAP)绿色日志美文文学说说博客网站pbootcms模板除日志博客类网站外,通过替换图文内容可快速适配:心情日记分享平台、文学创作社区、朋友圈内容聚合站、美文鉴赏网站、读书笔记平台等应用场景。查看源码 -
(自适应)品牌策划网络设计作品公司个人pbootcms网站源码下载本款基于PbootCMS开发的网站模板专为品牌策划、设计公司打造,特别适合展示创意作品、设计案例和企业服务。模板采用现代化设计风格查看源码 -
(PC+WAP)绿色硅胶橡胶玩具制品营销型网站源码下载为硅胶橡胶制品及玩具行业打造的营销型网站模板,采用PbootCMS内核开发,通过模块化设计实现产品参数、安全认证、应用场景等专业内容的可视化呈现,助力企业建立可信赖的线上展示平台。查看源码 -
(自适应响应式)宠物经验资讯咨询博客pbootcms网站源码下载除宠物资讯领域外,通过内容替换可快速适配宠物用品商城、宠物医疗咨询平台、宠物训练教程网站、动物保护组织官网、水族爱好者社区等垂直领域。查看源码 -
(PC+WAP)红色驾校培训学车在线预约源码下载基于PbootCMS内核开发的驾校培训专用网站模板,深度适配驾驶培训行业展示需求。采用PC与移动端同步响应设计,单一后台统一管理内容数据,更换图文素材后可快速转变为其他行业网站。查看源码
| 分享笔记 (共有 篇笔记) |
大家在看
织梦cms收费哪几款cms可以免费商用?本栏推荐
相关标签
大家喜欢
- 织梦dedecms网站备份该备份的内容有哪些
- dedecms织梦给栏目设置seo标题,关键字,描述的方法
- dede模板中调用UCHome会员日志相册话题游戏等信息的方法
- 织梦cms的dede:artlist标签增加notypeid属性实现栏目过滤的方法
- dedecms织梦网页调用指定栏目信息的实现方法
- 织梦cmsdede水印字体库data\mark\simhei.ttf不存在怎么办
- DEDECMS织梦程序安装方法(步骤教程)
- dedecms内容页图片过大导致布局混乱的修改方法示例
- 织梦dedecms后台编辑器样式错乱变为p x="" yle=的解决办法
- 织梦dedecms模板标签书写格式规范和参数说明