jquery - 拆分打开的背景图像以显示菜单

Question

我正在尝试创建类似 https://squareup.com/shop 的菜单

当您按下其中一个导航选项卡(“产品”“业务类型”“资源”)时，主图会滑动打开以显示菜单。

我认为我走在正确的轨道上，但我被一些逻辑/jquery 困住了。我也觉得我错过了什么。

HTML

<header>
    <div class="menu" style="background-image: url(my-background-image.jpg);">
        <a class="click-me">
           menu item
        </a>
        <div class="hidden">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#">nav1</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
            </ul>
        </div> <!-- end hidden -->
    </div> <!-- end menu -->
    <div class="banner" style="background-image: url(my-background-image.jpg);"> <!-- SAME IMAGE AS MENU BG IMAGE -->
    </div>
</header>

CSS

.menu {
    background-position: top;
    background-size: 100% auto;
    height:100px;

}

.hidden-content {
  display: none;
}

.banner {
    background-size: 100% auto;
    padding-bottom: 42%;
    background-repeat: no-repeat;
    background-position: 0 -100px;
}

JQUERY

<script>
    $(document).ready(function(){
        $(".click-me").click(function () {
        $(".hidden").slideDown();
        });
    );
</script>

非常感谢。

Answer 1

关闭 div.hidden 之前的 div#menu我使用而不是图像颜色，所以你可以检查它是如何工作的

$(".click-me").click(function() {
    $(".hidden").slideDown();
    //If you use the toggle() function, you can show and hide you hidden class on every click
    // $(".hidden").toggle();
});

.menu {
    background-color: red;
    background-position: top;
    background-size: 100% auto;
    height: 100px;
}

.hidden {
    display: none;
}

.banner {
    background-color: blue;
    background-size: 100% auto;
    padding-bottom: 42%;
    background-repeat: no-repeat;
    background-position: 0 -100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <div class="menu">
        <a class="click-me">
           menu item
        </a>
    </div>
    <div id="hidden" class="hidden">
        <ul class="nav nav-tabs nav-stacked">
            <li class="active"><a href="#">nav1</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </div>
    <!-- end hidden -->
    <div class="banner">
        <!-- SAME IMAGE AS MENU BG IMAGE -->
    </div>
</header>