如何在一个sidr菜单上显示多个菜单

Question

我有一个复杂的导航设置，我尝试使用sidr来实现响应菜单。我已经为主菜单工作，但是当我将div id =“navigation”添加到我的社交菜单时，它只是在sidr菜单中显示。我也想在我的sidr菜单中包含搜索。这里是我的代码：

<header> 
    <div id="mobile-header"> 
     <a id="responsive-menu-button" href="#sidr-main">Menu</a> 
    </div> 
    <div class="whiteBar"> 
     <div class="container"> 
      <div class="row"> 
       <div class="logo"> 
        <a href="<?php echo $directory; ?>index.php"><img src="<?php echo $directory; ?>_images/global/logo.png" alt="Caterpillar 2015 Year in Review"></a> 
       </div> 
       <div class="reportTitle"> 
        <h1>2015 Year in Review</h1> 
       </div> 
       <div class="searchWrapper"> 
        <div class="search"> 
         <form method="get" action="search.php"> 
          <input type="text" placeholder="Search" name="q" id="tipue_search_input" autocomplete="off" required=""> 
          <button type="submit"><img src="<?php echo $directory; ?>_images/global/icnSearch.png"></button> 
         </form> 
        </div> 
       </div> 
       <div id="navigation"> 
        <nav class="social"> 
         <ul> 
          <li class="share">Share</li> 
          <li><a class="linkedin gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnLinkedIn.png"></a></li> 
          <li><a class="google gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnGoogle.png"></a></li> 
          <li><a class="twitter gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnTwitter.png"></a></li> 
          <li><a class="facebook gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnFacebook.png"></a></li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="yellowBar"> 
     <div class="container"> 
      <div id="navigation"> 
       <div class="row"> 
        <nav class="mainMenu nav"> 
         <ul> 
          <li><a href="<?php echo $directory; ?>leadership/letter.php">Leadership</a></li> 
          <li><a href="<?php echo $directory; ?>data/landing.php">Data &amp; Innovation</a></li> 
          <li><a href="<?php echo $directory; ?>efficiency/landing.php">Efficiency</a></li> 
          <li><a href="<?php echo $directory; ?>support/landing.php">Customer Support</a></li> 
          <li><a href="<?php echo $directory; ?>people/landing.php">People</a></li> 
          <li><a class="reviewLink" href="<?php echo $directory; ?>review/landing.php">Business Review</a></li> 
         </ul> 
        </nav> 
        <div class="report link"> 
         <a class="gaClick" href="http://www.corporatereport.com/client/caterpillar/2015/sr/" target="_blank"><img src="<?php echo $directory; ?>_images/global/icnDownload.png">Download PDF Version</a> 
        </div> 
        <div class="download link"> 
         <a class="gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnSR.png">2015 Sustainability Report</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</header> 

有关如何做到这一点的任何想法？文档并没有很好地解释这一点。

谢谢！

Answer 1

我想通了！我只需要在JS中的#navigation后添加逗号，然后执行＃navigation2。这里是工作提琴：https://jsfiddle.net/rkxrvt63/5/ \

HTML：

<header> 
    <div id="mobile-header"> 
     <a id="responsive-menu-button" href="#sidr-main">Menu</a> 
    </div> 
    <div class="whiteBar"> 
     <div class="container"> 
      <div class="row"> 
       <div class="logo"> 
        <a href="<?php echo $directory; ?>index.php"><img src="<?php echo $directory; ?>_images/global/logo.png" alt="Caterpillar 2015 Year in Review"></a> 
       </div> 
       <div class="reportTitle"> 
        <h1>2015 Year in Review</h1> 
       </div> 
       <div id="navigation2"> 
       <div class="searchWrapper"> 
        <div class="search"> 
         <form method="get" action="search.php"> 
          <input type="text" placeholder="Search" name="q" id="tipue_search_input" autocomplete="off" required=""> 
          <button type="submit"><img src="<?php echo $directory; ?>_images/global/icnSearch.png"></button> 
         </form> 
        </div> 
       </div> 
       <nav class="social"> 
        <ul> 
         <li class="share">Share</li> 
         <li><a class="linkedin gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnLinkedIn.png"></a></li> 
         <li><a class="google gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnGoogle.png"></a></li> 
         <li><a class="twitter gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnTwitter.png"></a></li> 
         <li><a class="facebook gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnFacebook.png"></a></li> 
        </ul> 
       </nav> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="yellowBar"> 
     <div class="container"> 
      <div id="navigation"> 
       <div class="row"> 
        <nav class="mainMenu nav"> 
         <ul> 
          <li><a href="<?php echo $directory; ?>leadership/letter.php">Leadership</a></li> 
          <li><a href="<?php echo $directory; ?>data/landing.php">Data &amp; Innovation</a></li> 
          <li><a href="<?php echo $directory; ?>efficiency/landing.php">Efficiency</a></li> 
          <li><a href="<?php echo $directory; ?>support/landing.php">Customer Support</a></li> 
          <li><a href="<?php echo $directory; ?>people/landing.php">People</a></li> 
          <li><a class="reviewLink" href="<?php echo $directory; ?>review/landing.php">Business Review</a></li> 
         </ul> 
        </nav> 
        <div class="report link"> 
         <a class="gaClick" href="http://www.corporatereport.com/client/caterpillar/2015/sr/" target="_blank"><img src="<?php echo $directory; ?>_images/global/icnDownload.png">Download PDF Version</a> 
        </div> 
        <div class="download link"> 
         <a class="gaClick" href="#"><img src="<?php echo $directory; ?>_images/global/icnSR.png">2015 Sustainability Report</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</header> 

JS：

$('#responsive-menu-button').sidr({ 
    name: 'sidr-main', 
    source: '#navigation, #navigation2', 
    side: 'right' 
}); 

CSS：

#mobile-header { 
    display: none; 

    .navigation::after { 
     content: none; 
    } 
} 
@media only screen and (max-width: 1150px){ 
    #mobile-header { 
     display: block; 
    } 
    .yellowBar { 
     display: none; 
    } 
}