说明:
提取 DedeCMS 的二级菜单代码。
操作:
第一步:取JS。
将 /images/js/dropdown.js 取出。可以不取,直接通过路径调用(见下文“第四步:二级菜单代码”)。
第二步:取CSS。
代码如下,保存为 dropmenu.css备用。5.7SP1始于dedecms.css line:361。
/*-------- 下拉菜单 --------------*/
.dropMenu {
position:absolute;
top: 0;
z-index:100;
width: 120px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA, direction=135, strength=4);
margin-top: -1px;
border: 1px solid #93E1EB;
border-top: 0px solid #3CA2DC;
background-color: #FFF;
background:url(../images/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;
}
第三步:导航代码:
a 标签中的 rel 是关健部分,不可省略。如果导航是手动一项项写的 li 的话,请手动加上 rel,其后的数字是该栏目的ID。
<ul id="nav">
<li class="first"><a href='{dede:global.cfg_cmsurl/}/'>{dede:global.cfg_indexname/}</a></li>
{dede:channel type='top'}
<li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>
{/dede:channel}
</ul>
第四步:二级菜单代码:
以下为自动生成二级菜单。如果需要手动设置二级菜单项,可以将 dede:channelartlist 换成 dede:arclist,并写为以 id 为 “dropmenuXXXX”的二级菜单ul,XXXX为有二级菜单的栏目的ID。此部分代码官方貌似推荐放到 footer.htm 里。
注意代码最后一行中的“nav”,它是导航的ID,如果导航的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/}" 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("nav")</script>
第五步:提完。
<完>