How do I display multiple menus on one sidr menu

0
votes

I have a complex navigation set up that I am trying to use sidr in order to implement a responsive menu. I have got it working for the main menu, but then when I add div id="navigation" to my social menu, it only shows that in the sidr menu instead. I also want to include the search in my sidr menu. Here is my code:

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

Any ideas on how to do this? The documentation doesn't really explain very well about this.

Thanks!

1
jqueryresponsive-designnavigationsidr
share the CSS/fiddle mate - Siddharth
I can't get the js fiddle to work. jsfiddle.net/rkxrvt63 - blahblahAMYblah
I had my js in the wrong order. This should work. jsfiddle.net/rkxrvt63/2 - blahblahAMYblah

1 Answers

2
votes

I figured it out! I just needed to add a comma after the #navigation in my JS and do #navigation2. Here is the working fiddle: 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;
    }
}