Materialize CSSのダブルIDタグJoomla

Question

現在、フレームワークとしてMaterialize CSSを使用してJoomlaでテンプレートを作成しています。私はJoomlaでドロップダウンメニューを作成する部分にこだわっています。次のように以下のように（マテリアライズのドキュメントページ上で説明したように）HTMLが

<!-- 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の管理において

• 、現在のメニュー・モジュールを複製
• は、例えば、新しい位置に重複メニューモジュールを公開します"モバイルナビ"。この複製モジュールのその他の設定はすべて、元の（デスクトップ）メニューモジュールと同じにすることができます。
• テンプレートコードを更新して、モバイルナビゲーションを表示する「モバイルナビ」の位置を含めます。新しいモジュール位置の

更新テンプレートコードは、（ちょうど位置-1モバイル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>