经典案例
  • 百科营销案例——睿丁英语百科创建案例
  • 百科营销案例——听云百科创建案例
  • 百科营销案例——李斌百科创建案例

织梦DedeCMSv5.7模板添加下拉菜单-洪岩时代dedecms教程

发布于:2016-12-04 23:56来源:洪岩时代 作者:北京网站建设 点击:

  在dedecms5.5中官方模板里设置了下拉菜单的显示,但是之后的几个版本里面下拉菜单就没有再用在模板上了。以下方法是织梦DedeCMSv5.7模板添加下拉菜单的方法。

  首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓),可以放在最下方。

织梦DedeCMSv5.7模板添加下拉菜单-洪岩时代dedecms教程

<!-- //二级子类下拉菜单 ,考虑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> 

 
 
 


 
 

  刷新网页发现已经神奇地出现了下拉菜单,但此时是透明的,因为缺少一个下拉菜单图片。原因是没有背景图片。

  接下来你需要在DedeCMS5.7程序文件夹/templets/default/images里添加名字为mmenubg.gif的背景图片。也可以把DedeCMS5.6程序文件夹\dede\img里的mmenubg.gif(绿色背景图片,适用于绿色主题模板)或者DedeCMS5.5程 序文件夹\templets\images里的mmenubg.gif(蓝色背景图片,适用于蓝色主题模板)以相同名字替换在DedeCMS5.7程序文件夹/templets/default/images文件夹里。

  此时,你想要的效果基本上已经完成了,如果你还想做其他的设置,比如调整位置,只需要找到/templets/default/style/dedecms.css文件,ctrl+f 寻找.dropMenu。

  如果只是调整宽度,只用修改 :

  width: 100px;/*------ //原来参数是120-,如果二级标题字数少,还可以把参数调整到80,乃至是60--------*/

      织梦DedeCMSv5.7模板添加下拉菜单全局代码展示如下:

1,首页导航栏目可以调用为:

代码示例:

<div id=”navMenu”>
<ul>
<li><a href=”{dede:global.cfg_cmsurl/}/”>首页</a></li>
{dede:channel type=’top’ row=’6′ currentstyle=”<li class=’hover’><a href=’~typelink~’ ~rel~>~typename~</a></li>”}
<li><a href=’[field:typeurl/]‘ [field:rel/]>[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>

2,id=”navMenu”这个id是必须有的,在模板中的任何位置添加代码:

代码示例:

<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,在css样式表中添加:

代码示例:

/*——– 下拉菜单 ————–*/
.dropMenu {
position:absolute;
top: 0;
z-index:100;
width: 80px;
visibility: hidden;
margin-top: -1px;
border: 1px solid #003366;
border-top: 0px solid #3CA2DC; background-color:#FFFFFF;
padding-top:6px;
padding-bottom:6px;
}
.dropMenu li {
margin-top:2px;
margin-bottom:4px;
padding-left:0px;

.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;
}

这里css样式是可以任意调整的。

完成以上代码,即可在dedecms5.7sp1模板中添加下拉菜单。

 
 
 
 
 

------分隔线----------------------------
------分隔线----------------------------