DeDecMS에서 드롭다운 메뉴 구현 방법

5.7 버전에서는 이미 비교적 간단한 방법으로 하단 메뉴를 실현할 수 있다. 우리는 기존의 방법을 사용할 수도 있고 내가 쓴 두 번째 방법으로 실현할 수도 있다.
1. 드롭다운 메뉴가 필요한 곳에 다음 코드를 넣는다.
    
4

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

페이지 하단에 다음 코드를 넣습니다.
4

<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급 메뉴를 낼 수 있으니, 너는 스스로 디스플레이 스타일을 다시 조정해야 한다
2.channelartlist와 sql 라벨로 리 생성
   

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

이렇게 생성이 돼요.

   
• 
           
  
                 
           
  
     

이런 구조, 그리고 인터넷에서 jquery의 드롭다운 메뉴 코드를 마음대로 만들어도 예쁜 드롭다운 메뉴를 실현할 수 있다