DedeCMS用itemindex实现下拉导航

        现在网站菜单导航的形式越来越多样化了,网站丰富了内容的同时也更加注重用户体验,这就是做啦的宗旨。菜单导航是网站的内容入口,如果设计的不合理,用户很难找到想要的页面内容,布局自己的导航可以参考《利于SEO优化的企业网站导航设计》,接下来看看在dedecms的基础上,实现某个菜单导航加个小标签(如:HOT,推荐等)。

seo下拉菜单

        如果你把导航菜单写死(不用标签调用),那就很容易实现,但如果用标签调用的话就存在一定问题。这里利用SuperSlide插件实现,自己到网上搜就好了,功能相当的丰富,基本搞定常见的网页效果。

       建议先浏览以下文章,因为所谓的下拉菜单需要运用{dede:channelartlist}调用二级栏目的内容,《dedecms调用二级栏目并实现channelartlist支持currentstyle属性》,支持了currentstyle属性就好办了。

       此外要实现每个输出的顶级导航的<li>都有不一样的class,还需要在class后面增加自增函数{dede:global.itemindex/},该函数默认从1开始递增。把完整导航菜单代码贴出来。

<p class="nav">
 <li><a href='{dede:global.cfg_basehost/}'>首页</a></li>
 <!-- 当前栏目输出<li class='nLi on'>,非当前栏目输出<li class='nLi'> -->
 {dede:channelartlist typeid='top' currentstyle='nLi on'}
 <li class='{dede:field.currentstyle/} li_{dede:global.itemindex/}'>
  <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
  <ul>
   {dede:channel type='son' noself='yes'}
   <li><a href="[field:typelink/]">[field:typename/]</a></li>
   {/dede:channel}
  </ul> 
 </li> 
 {/dede:channelartlist}
</p>

输出顶级html代码如下,样式自己写吧

<p class="nav">
 <li><a href="/">首页</a></li>
 <li class='nLi  on li_1'><!--当前栏目有“on”-->
  <a href="/link1">栏目1</a>
  <ul>
   <li><a href="/link/a">栏目1-1</a></li>
  </ul>
 </li>
 <li class='nLi li_2'>
  <a href="/link2">栏目2</a>
  <ul>
   <li><a href="/link2/a">栏目2-1</a></li>
  </ul>
 </li>
</p>