女神猫女王

代理加盟 2020全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 織夢大學 > 使用教程 >

DedeCMS用itemindex實現下拉導航

來源:本站原創 發布時間:2020-04-01 21:18:45熱度:我要評論(0

免費下載,無需注冊無需充值

        現在網站菜單導航的形式越來越多樣化了,網站豐富了內容的同時也更加注重用戶體驗,這就是秀站網的宗旨。菜單導航是網站的內容入口,如果設計的不合理,用戶很難找到想要的頁面內容,布局自己的導航可以參考《利于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>

轉載請注明來源網址:http://www.qksux.club/dedecms_jq/1454.html

    發表評論

    評論列表(條)

      女神猫女王 583880704749440101682108599457224721189798331853739464719606366512461491675531132631108815508319212 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();