欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
织梦cms导航栏栏往下拉莱单制作实例教程
时间: 2021-02-21 21:19 浏览次数:
织梦cms5.7版本号的默认设置模版中,导航栏栏是沒有二级莱单的,实际上默认设置模版中能够设定二级莱单。下边大家就看来看如何完成织梦cms默认设置模版导航栏栏的二级莱单。 1、
织梦cms5.7版本号的默认设置模版中,导航栏栏是沒有二级莱单的,实际上默认设置模版中能够设定二级莱单。下边大家就看来看如何完成织梦cms默认设置模版导航栏栏的二级莱单。 1、以便演试二级莱单的款式,大家建立一个频道新闻报道管理中心,其下有3身高频道企业新闻报道、制造行业资询、视頻管理中心 ,建立...

织梦cms5.7版本号的默认设置模版中,导航栏栏是沒有二级莱单的,实际上默认设置模版中能够设定二级莱单。下边大家就看来看如何完成织梦cms默认设置模版导航栏栏的二级莱单。
1、以便演试二级莱单的款式,大家建立一个频道 新闻报道管理中心 ,其下有3身高频道 企业新闻报道 、 制造行业资询 、 视頻管理中心 ,建立进行后,转化成网站,导航栏栏沒有往下拉莱单的款式。下边便是二级莱单的加上方式。
2、最先在默认设置模版文档夹default的footer.htm文档中的头顶部再加这一段编码 !-- //二级子类往下拉莱单,考虑到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/}   > {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
把上边编码放进footer.htm后,储存文档,转化成一放网站后,网站的导航栏栏就早已出現二级莱单的款式,款式以下图:
如今就会有了二级莱单的款式,而且沒有情况,是全透明的情况。
3、根据看上边加上的编码,在其中启用了一个js文档,是织梦cms系统软件的/images/js/dropdown.js ,根据这一相对路径你能发觉文档是织梦cms系统软件内置的,并不是模版中的,因此大家即使用别的的模版还可以启用这一js款式。
此外大家如今还可以对这一全透明的二级莱单做调节,由于二级莱单的款式在织梦cms默认设置模版default的style中的dedecms.css中也是默认设置存有的,开启dedecms.css查寻 往下拉莱单 这一词,便可以寻找编码,以下图
.dropMenu便是往下拉莱单的款式,懂div+css的朋友应当了解如何改动,不明白的请学习培训一下css。
4、根据上边的往下拉莱单的css款式,大家能看到,往下拉莱单的情况是名字为mmenubg.Gif 的照片,大家能够把下边的照片拷贝到default的images文档夹下,取名为mmenubg.Gif ,那样往下拉莱单就出現情况了。
备注名称:
  聪慧的朋友将会发觉了,实际上,大家能够立即使用织梦cms默认设置的往下拉莱单資源,放进自身的模版中,便可以在自身模版中完成往下拉莱单的实际效果。实际流程和上边类似:
1、在自身的模版头顶部导航栏中,用下边编码启用导航栏(实际上这种编码便是默认设置模版的导航栏启用编码):
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
{/dede:channel}
/UL
/div
  必须留意的是留意的是 LI a href= [field:typeurl/]  [field:rel/] [field:typename/] /a /LI 这一行,这一是輸出导航栏栏频道的,必须在这里里加上上鲜红色的一部分[field:rel/] 要想大量款式就必须自身渐渐地检测了。
  提示:这儿务必用id= navMenu ,在css表中把头顶部的id或是class变更为默认设置这一id= navMenu ,由于第三步我能提到CSS一部分的改动。
2、在你网站已经应用的底端模版(如footer.htm)加上以下编码(实际上便是上边第二步中的往下拉莱单js编码)
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/}   > {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
3、到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导航栏往下拉莱单作用就完成了,祝你们好运气。


dedecms模版,dedecms公司模版,dedecms新闻资讯模版,高档HTML5响应式模版,dedecms手机上模版,织梦cms模版实例教程,网站模版,网页页面模版,完全免费网页页面模版



Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园