说明:
提取 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>
第五步:提完。
<完>