首页 » 工作 » 正文

提取 DedeCMS 的下拉二级菜单效果代码(不含图片)

发布者:站点默认
2012/07/11 浏览数(2,700) 分类:工作 评论(1)

说明:

提取 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>

第五步:提完。

<完>

点击返回顶部
  1. 留言
  2. 联系方式