DedeCMS用itemindex实现下拉导航
现在网站菜单导航的形式越来越多样化了,网站丰富了内容的同时也更加注重用户体验,这就是做啦的宗旨。菜单导航是网站的内容入口,如果设计的不合理,用户很难找到想要的页面内容,布局自己的导航可以参考《利于SEO优化的企业网站导航设计》,接下来看看在dedecms的基础上,实现某个菜单导航加个小标签(如:HOT,推荐等)。
如果你把导航菜单写死(不用标签调用),那就很容易实现,但如果用标签调用的话就存在一定问题。这里利用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>