新闻中心 News

当前位置:主页 > 新闻资讯 > 技术交流 >

织梦Dedecms栏目分类实现二级菜单效果

日期:2018-01-10 / 作者:融科网络 / 人气: 来源:郑州网站建设

方法一,利用模块标签
 
DEDECMS导航二级栏目下拉列表,
 
channelartlist还经常用在封面模板中,主要用来循环栏目标题和栏目标题下的文档,也就是用于获取当前频道(或者指定频道)的下级栏目的文档列表。
 
{dede:channelartlist}
 
{dede:type}[field:字段名/]{/dede:type}(调用当前频道栏目)
 
{dede:arclist}[field:字段名/]{/dede:arclist}(获得下级栏目的文档列表)
 
{/dede:channelartlist}
 
废话不多说,直接看代码:
 
 代码如下 复制代码
<div class=”nav_dh”>
<ul>
{dede:channelartlist typeid={dede:field.typeid/}//读取顶级栏目
<li><a href=”{dede:field name=’typeurl’/}”>{dede:field name=’typename’/}</a>
<ul>
{dede:channel type=’son’}//读取顶级栏目的二级目录
<li><a href=”[field:typelink/]” title=”[field:typename/]“>[field:typename/]</a></li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}
</ul>
</div>
 
我们发现,这个下拉列表的特点是<li>标签里包含有<ul>标签。那么,我们需要写一段相应的css样式来支持。
<style type=”text/css”>
/* 导航 */
#nav_dh {width:1000px; line-height:48px; list-style-type: none; margin:auto; }
#nav_dh a {display: block; width: 80px; text-align:center;}
#nav_dh a:link {color:#FFF; text-decoration:none;}
#nav_dh a:visited {color:#FFF;text-decoration:none;}
#nav_dh a:hover {color:#FFF;text-decoration:none;font-weight:bold;}
#nav_dh li {float: left; width:104px; background:#86603b;}
#nav_dh li a:hover{background:#999;}
#nav_dh li ul {line-height: 27px; list-style-type: none;text-align:left;left:-999em; width:104px; position: absolute; z-index:1;}
#nav_dh li ul li{float: left; width:104px;background: #F6F6F6;}
#nav_dh li ul a{display: block; width:104px;_width:123px;height:auto; margin:0 auto;text-align:left; text-align:center;}
#nav_dh li ul a:link {color:#666; text-decoration:none;}
#nav_dh li ul a:visited {color:#666;text-decoration:none;}
#nav_dh li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#86603b;}
#nav_dh li:hover ul {left: auto;}
#nav_dh li.sfhover ul {left: auto;}
</style>
 
仔细查看可以发现,通过这一段css,可以更改各级菜单背景、字体的颜色,鼠标悬停颜色,宽度,高度等。
 
如果整站栏目有三层,需要调用某个一级栏目下的所有栏目呢?那么,你只需要改一改typeid。
 
方法二,用sql语句获取二级菜单、二级栏目方法
 
代码如下:
 
 代码如下 复制代码
 {dede:channelartlist typeid='1'}
            <h1><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></h1>
             {dede:sql sql='Select * from dede_arctype where reid=~id~'}
             <h2><a href="[field:typeurl/]">[field:typename/]</a></h2>{/dede:sql}
{/dede:channelartlist}

显示效果:
织梦Dedecms栏目分类实现二级菜单效果
郑州做网站首选融科网络,我们专注郑州网站建设,网站制作,网站设计与开发,域名注册虚拟主机等网站相关的业务,有任何疑问都可以联系我们.郑州网络公司融科网络期待与您的合作.
本文链接:郑州网站建设公司http://www.ppssdd.com/news/tech/284.html转载请标明出处,谢谢合作!