DeDeCMS中如何实现下拉菜单

在5.7版本，已经有比较简单的方法实现下拉菜单，我们可以用它已有方法，也可以用我写的第二种方法来实现

1. 在需要下拉菜单的地方加入以下代码

    

  <div id="navMenu">

			<ul>

				<li><a href="{dede:global.cfg_indexurl/}">首页</a></li>                                

                                    {dede:channel row='10' typeid="13"}

				    <li><a href="[field:typeurl/]"[field:rel/]>[field:typename/]</a></li></li>                                 

                                    {/dede:channel}

			</ul>

		</div>

     在页面底部加入以下代码

 

 

<script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>

{dede:channelartlist typeid='13' 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>

     再加入以下样式

 

 

<style type="text/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;

	}

	</style>

这样就可以出二级菜单了，你需要自己再调一下显示样式

 

2. 用channelartlist和sql标签来生成li

   

<nav id="navigation" class="navigation clearfix">

			<ul class="clearfix">

				<li class='active'>

					<a href="{dede:global.cfg_indexurl/}/" rel=“nofollow”>首页</a>

				</li>

				{dede:channelartlist typeid='13'}

					<li><a href='{dede:field name='typeurl'/}'>{dede:field name='typename'/}</a>

						<ul> 

						{dede:sql sql='Select * from dede_arctype where reid=~id~  ORDER BY id limit 0,17'} 

						<li><a href='[field:typeurl/]'>[field:typename/]</a></li> 

						{/dede:sql} 

						</ul>

					</li>

				{/dede:channelartlist}

			</ul>

			<div class="widget_social clearfix">

				<ul class="social-icons clearfix">

					<li class="facebook"><a href="#">Facebook<span></span></a></li>

					<li class="twitter"><a href="#">Twitter <span></span></a></li>

					<li class="rss"><a href="#">Rss <span></span></a></li>

					<li class="youtube"><a href="#">YouTube <span></span></a></li>

				</ul><!--/ .social-icons-->

			</div><!--/ .widget_social-->

		</nav><!--/ #navigation-->

这样就生成出

 

<ul>

    <li>

         <ul>

                <li></li>

         </ul>

    </li>

</ul>

这样的结构，然后网上随便搞个jquery的下拉菜单的代码都可以实现漂亮的下拉菜单了