织梦cms导航子栏目

织梦CMS导航中子栏目的显示与配置

带下拉菜单的导航是网站常见的功能需求。织梦CMS通过嵌套调用栏目标签可以实现导航中的子栏目展示。

一、基本的下拉导航代码

<ul class="nav">
{dede:channel type='top' row='8'}
<li>
<a href="[field:typelink/]">[field:typename/]</a>
{dede:channel type='son' noself='yes'}
<ul class="subnav">
<li><a href="[field:typelink/]">[field:typename/]</a></li>
</ul>
{/dede:channel}
</li>
{/dede:channel}
</ul>

二、配合CSS实现的悬停下拉效果

.nav li{position:relative;float:left;}
.nav .subnav{display:none;position:absolute;top:100%;left:0;}
.nav li:hover .subnav{display:block;}

三、高亮当前栏目和子栏目

{dede:channel type='top' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a>"}
<li>
<a href="[field:typelink/]">[field:typename/]</a>
{dede:channel type='son' noself='yes'}
<ul class="subnav">
<li><a href="[field:typelink/]">[field:typename/]</a></li>
</ul>
{/dede:channel}
</li>
{/dede:channel}

四、子栏目带图标的导航

{dede:channel type='son' noself='yes'}
<li>
<a href="[field:typelink/]">
<img src="[field:typeimg/]" alt="">
<span>[field:typename/]</span>
</a>
</li>
{/dede:channel}

五、移动端适配

移动端建议使用点击展开/收起的方案替代悬停效果，配合JavaScript实现：

document.querySelectorAll('.nav > li > a').forEach(item=>{
item.addEventListener('click',function(e){
if(window.innerWidth<768){
e.preventDefault();
this.parentNode.classList.toggle('open');
}
});
});