Joomla 导航菜单答案

【问题标题】：Joomla Nevigation MenuJoomla 导航菜单
【发布时间】：2014-03-27 17:31:01
【问题描述】：

如何创建带有子菜单的 Joomla 主菜单。

【问题讨论】：

标签： joomla

【解决方案1】：

不要修改核心代码！有一个简单的解决方案，无需破解核心。在升级过程中破解内核会导致问题，更不用说您将无法在其他任何地方使用主菜单模块，因为菜单将被硬编码。

Joomla 旨在使用 CSS 来完成您所需要的。

首先，在菜单模块中，添加一个模块类后缀，以便CSS只能应用于该模块。像 -mainmenu 这样的东西会起作用。这会将模块类从“moduletable”更改为“moduletable-mainmenu”。

接下来，您添加一些 CSS 以使背景图像以您想要的方式工作。像这样 -

.moduletable-mainmenu LI{background:url(path-to-square-background.jpg)}
.moduletable-mainmenu LI:hover{background:url(path-to-square-background-mouseover.jpg)}
.moduletable-mainmenu UL:first-child{background:url(path-to-left-rounded-background.jpg)}
.moduletable-mainmenu UL:first-child:hover{background:url(path-to-left-rounded-background-mouseover.jpg)}
.moduletable-mainmenu UL:last-child{background:url(path-to-right-rounded-background.jpg)}
.moduletable-mainmenu UL:last-child:hover{background:url(path-to-right-rounded-background-maouseover.jpg)}

Joomla 还会将 id="current" 添加到当前菜单，因此如果您想突出显示当前菜单，可以将其添加到 CSS 中。此外，您还可以在菜单模块的其他参数中打开 Active Parent，以便 Joomla 将 class="parent" 添加到父菜单项，如果您也想突出显示父菜单项。

现在您无需修改任何核心代码即可获得圆角。

【讨论】：

【解决方案2】：

这很容易做到。

这里我已经解释了如何做到这一点。

1.复制菜单的 html 代码。 2.转到你的苍蝇 --> 模块 --> mod_mainmenu --> legacy.php 3.转到第380行 ''; 回声''; 回声'';

            if ($spacer_end) {
                echo '<span class="' . $menuclass . '"> ' . $spacer_end . ' </span>';
            }

            if ($spacer_start) {
                $html = '<span class="' . $menuclass . '"> ' . $spacer_start . ' </span>';
                echo implode($html, $links);
            } else {
                echo implode('', $links);
            }

            if ($spacer_end) {
                echo '<span class="' . $menuclass . '"> ' . $spacer_end . ' </span>';
            }

            echo '</td>';
            echo '</tr>';
            echo '</table>';`

4.在此处复制并粘贴您的 html 代码。例如：

echo "
            <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
          <tr>
            <td><div id=\"menu\">
          <ul>
                                     <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=frontpage&Itemid=63\" class=\"current\"> Home</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&Itemid=27\">Profile</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=friends&Itemid=2\" onmouseover=\"bizdropdownmenu(this, event, 'menu1')\">Friends</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=inbox&Itemid=41\" onmouseover=\"bizdropdownmenu(this, event, 'menu2')\">Message</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=photos&Itemid=49\" onmouseover=\"bizdropdownmenu(this, event, 'menu3')\">Photos</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=videos&Itemid=74\" onmouseover=\"bizdropdownmenu(this, event, 'menu4')\">Videos</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=events&Itemid=142\" onmouseover=\"bizdropdownmenu(this, event, 'menu5')\">Events</a></li>
                                    <li>
                                    <a href=\"http://project.websolusionz.com/speed/index.php?option=com_kunena&view=listcat&catid=0&func=listcat&Itemid=165\">Forum</a></li>
                                    <li><a href=\"chat.html\">Chat</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&Itemid=158\" onmouseover=\"bizdropdownmenu(this, event, 'menu6')\">My&nbsp;Account</a></li>
          </ul>
         <div class=\"menu\" id=\"menu1\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=search&Itemid=74&Itemid=129\">Search</a><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=search&task=advancesearch&Itemid=74&Itemid=130\">Advanced Search</a><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=friends&task=invite&Itemid=2&Itemid=131\">Invite Friends</a><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=friends&task=sent&Itemid=2&Itemid=132\">Request Send</a><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=friends&task=sent&Itemid=2&Itemid=133\">Pending My Approval</a></div>
         <div class=\"menu\" id=\"menu2\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=inbox&task=sent&Itemid=77&Itemid=135\">Send</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=inbox&task=write&Itemid=41&Itemid=50\">Compose Message</a></div>
         <div class=\"menu\" id=\"menu3\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=photos&task=myphotos&userid=84&Itemid=74&Itemid=139\">My Photos</a></div>
         <div class=\"menu\" id=\"menu4\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=videos&task=myvideos&userid=84&Itemid=74&Itemid=140\">My Videos</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=videos&task=search&Itemid=74&Itemid=141\">Search Videos</a></div>
         <div class=\"menu\" id=\"menu5\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=events&task=myevents&userid=84&Itemid=82&Itemid=143\">My Events</a></div>
         <div class=\"menu\" id=\"menu6\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=linkVideo&Itemid=164\">Change Profile Videos</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=uploadAvatar&Itemid=164\">Change Profile Picture</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=edit&Itemid=164\">Edit Profile</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=editDetails&Itemid=164\">Edit Detail</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=privacy&Itemid=164\">Privacy</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=preferences&Itemid=164\">Preferences</a>
         </div>
        </div></td>
          </tr>
        </table>";


        /*  if ($spacer_end) {
                echo '<span class="' . $menuclass . '"> ' . $spacer_end . ' </span>';
            }

            if ($spacer_start) {
                $html = '<span class="' . $menuclass . '"> ' . $spacer_start . ' </span>';
                echo implode($html, $links);
            } else {
                echo implode('', $links);
            }

            if ($spacer_end) {
                echo '<span class="' . $menuclass . '"> ' . $spacer_end . ' </span>';
            }*/

            /*echo '</td>';
            echo '</tr>';
            echo '</table>';*/
            break;
    }
}

}

5.现在您在主菜单中添加菜单。 6.你肯定会在前面板上看到你的菜单。

【讨论】：