0

我有一个复杂的导航设置，我正在尝试使用 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>

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

谢谢！

4

1 回答 1

2

我想到了！我只需要在我的 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;
    }
}
于 2016-01-13T17:33:20.463 回答