如何在dede中实现带有currentstyle的嵌套li二级菜单？

dede实现嵌套li加currentstyle的二级菜单

实现步骤

1. 准备工作

在开始之前，确保已经安装并配置好DedeCMS系统，并且已经创建了相应的栏目和子栏目。

2. 修改标签库文件

打开DedeCMS系统的includetaglibchannel.lib.php 文件，找到以下两行代码：

//检查是否有子栏目，并返回rel提示（用于二级菜单）
$row['rel'] = " rel='dropmenu{$row['id']}'";

这两行代码是DedeCMS官方为了支持二级菜单所添加的硬编码。

3. 编写头部导航代码

将以下代码添加到模板的头部文件中：

<ul>
    <li><a href='{dede:global.cfg_cmsurl/}/'>
        <span class="cn">首页</span>
        <span class="en">Home</span>
    </a></li>
    {dede:channel type='top' row='10' currentstyle='<li class="current"><a href="~typelink~" ~rel~>#<span class="cn">~typename~</span><span class="en">~dirName~</span></a></li>'}
    <li>
        <a href='[field:typeurl/]' [field:rel/]>
            <span class="cn">[field:typename/]</span>
            <span class="en">[field:typedir runphp='yes' commet="获得最后目录名，英文"]
                $l=split("/", @me);
                @me=array_pop($l);
            [/field:typedir]</span>
        </a>
    </li>
    {/dede:channel}
</ul>

这段代码会在头部生成一个包含顶级栏目的导航条，并为当前栏目添加current 样式。

4. 编写底部导航代码

将以下代码添加到模板的底部文件中：

{dede:channelartlist typeid='top'}
<ul id="dropmenu{dede:field.typeid/}">
    {dede:channel type='son' noself='yes'}
    <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
</ul>
{/dede:channelartlist}

这段代码会在底部生成一个包含子栏目的下拉菜单，并通过id 属性与顶部导航进行关联。

5. CSS和JS设置

接下来需要编写CSS和JS来实现菜单的显示和隐藏效果，这部分内容较为复杂，可以根据具体需求进行调整，以下是一个简单的示例：

ul#dropmenu1 { display: none; }
ul#dropmenu1 li { float: left; marginleft: 10px; }
ul#dropmenu1 li a { color: #333; textdecoration: none; }
ul#dropmenu1 li a:hover { color: red; }

$(document).ready(function() {
    $("ul li").hover(function() {
        $(this).find("ul").stop(true, true).delay(200).fadeIn(200);
    }, function() {
        $(this).find("ul").stop(true, true).delay(200).fadeOut(200);
    });
});

相关问答FAQs

问题一：为什么在DedeCMS中实现嵌套li加currentstyle的二级菜单这么麻烦？

答：DedeCMS的标签系统相对固定，不支持直接生成复杂的嵌套菜单结构，需要通过修改标签库文件和使用JavaScript来实现这种复杂的菜单效果，DedeCMS官方之前的版本也使用了JavaScript来实现这一功能，并为此进行了一些硬编码。

问题二：如何确保生成的二级菜单能够正确显示当前栏目的样式？

答：要确保生成的二级菜单能够正确显示当前栏目的样式，需要在模板代码中正确使用currentstyle 属性，并在CSS中定义相应的样式，可以在<li> 标签中添加class="current" 类，然后在CSS中为该类定义样式，确保在JavaScript中正确处理鼠标悬停事件，以便在用户悬停时显示或隐藏子菜单。

<ul class="navmenu">
  <li class="menuitem" onmouseover="this.className='menuitem hover'" onmouseout="this.className='menuitem'">
    <a href="link1.html" class="menulink ${currentStyle}">菜单项1</a>
  </li>
  <li class="menuitem" onmouseover="this.className='menuitem hover'" onmouseout="this.className='menuitem'">
    <a href="link2.html" class="menulink ${currentStyle}">菜单项2
      <ul class="submenu">
        <li class="menuitem" onmouseover="this.className='menuitem hover'" onmouseout="this.className='menuitem'">
          <a href="link21.html" class="menulink ${currentStyle}">子菜单项1</a>
        </li>
        <li class="menuitem" onmouseover="this.className='menuitem hover'" onmouseout="this.className='menuitem'">
          <a href="link22.html" class="menulink ${currentStyle}">子菜单项2</a>
        </li>
      </ul>
    </a>
  </li>
  <li class="menuitem" onmouseover="this.className='menuitem hover'" onmouseout="this.className='menuitem'">
    <a href="link3.html" class="menulink ${currentStyle}">菜单项3</a>
  </li>
</ul>
<script type="text/javascript">
  function currentStyle() {
    var currentUrl = window.location.href;
    var menuItems = document.getElementsByClassName("menuitem");
    for (var i = 0; i < menuItems.length; i++) {
      var menuItem = menuItems[i];
      var link = menuItem.getElementsByTagName("a")[0];
      if (currentUrl == link.href) {
        menuItem.className += " current";
      }
    }
  }
</script>