CMS教程
每日更新|TOP排行榜|Tag标签|充值
CMS教程模板无忧>建站教程>CMS教程>DedeCms教程>
收藏分享查看评论DedeCms教程
大中小

织梦dedecms 5.7 sp1模板怎么添加下拉菜单_DedeCms教程

编辑Tag赚U币
教程Tag：暂无Tag,欢迎添加,赚取U币!
织梦dedecms 5.7 sp1模板怎么添加下拉菜单
在织梦dedecms5.5中官方模板里设置了下拉菜单的显示，但是之后的几个版本里面下拉菜单就没有再用在模板上了。
 
以下方法将织梦dedecms5.5的下拉菜单移植到5.7sp1中，实现栏目的下拉菜单。
 
1，首页导航栏目可以调用为：
 
代码示例:
  1. <div id=”navMenu”> 
  2. <ul> 
  3. <li><a href=”{dede:global.cfg_cmsurl/}/”>首页</a></li> 
  4. {dede:channel type=’top’ row=’6′ currentstyle=”<li class=’hover’><a href=’~typelink~’ ~rel~>~typename~</a></li>”} 
  5. <li><a href=’[field:typeurl/]‘ [field:rel/]>[field:typename/]</a></li> 
  6. {/dede:channel} 
  7. </ul> 
  8. </div> 
2，id=”navMenu”这个id是必须有的，在模板中的任何位置添加代码：
 
代码示例:
  1. <script type=’text/javascript’ src=’{dede:global.cfg_cmsurl/}/images/js/dropdown.js’></script> 
  2. {dede:channelartlist typeid=’top’ cacheid=’channelsonlist’}<ul id=”dropmenu{dede:field.typeid/}”> 
  3. {dede:channel type=’son’ noself=’yes’}  <li><a href=”[field:typelink/]“>[field:typename/]</a></li> 
  4. {/dede:channel} 
  5. </ul> 
  6. {/dede:channelartlist} 
  7. <script type=”text/javascript”>cssdropdown.startchrome(“navMenu”)</script> 
3，在css样式表中添加：
  1.   
  2. 代码示例: 
  3. /*——– 下拉菜单 ————–*/ 
  4. .dropMenu { 
  5. position:absolute; 
  6. top: 0; 
  7. z-index:100; 
  8. width: 80px; 
  9. visibility: hidden; 
  10. margin-top: -1px; 
  11. border: 1px solid #003366; 
  12. border-top: 0px solid #3CA2DC; background-color:#FFFFFF; 
  13. padding-top:6px; 
  14. padding-bottom:6px; 
  15. } 
  16. .dropMenu li { 
  17. margin-top:2px; 
  18. margin-bottom:4px; 
  19. padding-left:0px; 
  20. } // www.jbxue.com 
  21. .dropMenu a { 
  22. width: auto; 
  23. display: block; 
  24. color: black; 
  25. padding: 2px 0 2px 1.2em; 
  26. } 
  27. * html .dropMenu a { 
  28. width: 100%; 
  29. } 
  30. .dropMenu a:hover { 
  31. color:red; 
  32. text-decoration: underline; 
  33. } 
这里css样式是可以任意调整的。
 
完成以上代码，即可在织梦dedecms5.7sp1模板中添加下拉菜单。
仅供大家学习参考哦~

查看更多 DedeCms教程  织梦模板  织梦DedeCms视频教程  织梦dedecms专题

来源：模板无忧//所属分类：DedeCms教程/更新时间：2020-05-19
[收藏][报错][返回列表]
相关DedeCms教程：