Materialise css Joomla 中的双 ID 标签

Question

我目前正在使用 Materialize CSS 作为框架在 Joomla 中制作模板。我在 Joomla 中制作下拉菜单的部分遇到了困难。 HTML 应该如下所示（如 Materialize 的文档页面中所述）

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
 <li><a href="#!">one</a></li>
 <li><a href="#!">two</a></li>
 <li class="divider"></li>
 <li><a href="#!">three</a></li>
</ul>

<li>
 <a class="dropdown-button" href="#!"  data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
</li>

我的index.php如下：

<!-- Start Navbar -->
     <nav class="indigo" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="index.php" class="brand-logo">
                <?php echo $logo; ?>
                    <?php if ($this->params->get('sitedescription')) : ?>
                        <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
                <?php endif; ?>
            </a>
            <ul class="right hide-on-med-and-down">
                <jdoc:include type="modules" name="position-1" style="none" />
            </ul>
            <ul id="nav-mobile" class="side-nav">
                <li class="material-menu">
                    <a href="index.php">
                        <?php echo $logo; ?>
                            <?php if ($this->params->get('sitedescription')) : ?>
                                <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
                        <?php endif; ?>                 
                    </a>
                </li>
                <jdoc:include type="modules" name="position-1" style="none" />
            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi mdi-menu"></i></a>
        </div><!-- /nav-wrapper container -->
    </nav>
<!-- End Navbar -->

问题是因为移动菜单，我使用了两次菜单模块。 ID 标签只能使用一次，因此下拉列表不起作用。

有谁知道我该如何解决这个问题？

Answer 1

在模板中多次复制相同的模块位置不是一个好主意，因为它每次都会呈现相同的标记。

相反，最好的方法是创建菜单模块的副本并将其发布到您的移动菜单位置。

在 Joomla Admin 中，复制当前菜单模块
将复制的菜单模块发布到新位置，例如"mobile-nav"。此复制模块的所有其他设置可以与原始（桌面）菜单模块相同。
更新您的模板代码以包含 "mobile-nav" 应该显示移动导航的位置。

更新新模块位置的模板代码（只需将 position-1 换成 mobile-nav）：

<ul id="nav-mobile" class="side-nav">
    <li class="material-menu">
        <a href="index.php">
            <?php echo $logo; ?>
                <?php if ($this->params->get('sitedescription')) : ?>
                    <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
            <?php endif; ?>                 
        </a>
    </li>
    <jdoc:include type="modules" name="mobile-nav" style="none" />
</ul>

Materialise css Joomla 中的双 ID 标签

Double ID tag in Materialize css Joomla

joomla

joomla3.0

materialize