在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的下拉菜单的代码都可以实现漂亮的下拉菜单了