代码之家 › 专栏 › 技术社区 › chainboost

Materialize css Joomla中的双ID标记

materialize joomla3.0 joomla

chainboost · 技术社区 · 8 年前

我目前正在Joomla中使用MaterializeCSS作为框架制作模板。我被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>

我的索引。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标记只能使用一次,因此下拉列表不起作用。

有人知道我该如何解决这个问题吗?

1 回复 | 直到 8 年前

Noddy 8 年前

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

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

在Joomla Admin中,复制当前菜单模块
将复制的菜单模块发布到新位置,例如“移动导航”。此复制模块的所有其他设置可以与原始(桌面)菜单模块相同。
更新模板代码,以包含应显示移动导航的“移动导航”位置。

更新新模块位置的模板代码(仅用移动导航替换位置-1):

<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>