Как отобразить несколько меню в одном меню 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

Я понял! Мне просто нужно было добавить запятую после #navigation в моем JS и сделать # 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; 
    } 
}