Question

这样的菜单

当您按其中一个导航标签（'产品''业务类型''资源'）时，英雄图片会滑开以显示菜单。

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

HTML

use App\Event;

CSS

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

JQUERY

.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;
}

非常感谢提前。

Answer 1

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

＆＃13;

$(".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();
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用.animate()，.is()，.siblings()，.addClass()，.removeClass()，.toggleClass()，.data()，{{ 1}}

.finish()

var curr, bg = $(".bg:last"),
  content = $(".content"),
  nav = $("nav a");
  nav.eq(5).data("content", $("<h3/>", {text:"F"}))
$("a").click(function fx(e) {
  // clicked `a` element
  var elem = $(e.target);

  elem.addClass("current")
    .siblings().removeClass("current");
  // set `curr` to `elem`
  if (!curr) {
    curr = elem;
  };
  // is `.content` displayed?
  var active = content.is(".active");
  // if `curr` is `elem` or `curr` is `elem` 
  // and `content` is displayed
  if (curr.is(elem) || !active) {
    bg
      .animate({
        top: active ? -100 : 0
      }, {
        start: function() {
          content.toggleClass("active")
            .slideDown(1050, function() {
              // set `html` of `content to `elem` `data-*` attribute
              content.html(elem.data("content"));
            })
        },
        duration: 1000,
        done: function() {
          curr = elem;
          // if content is not displayed remove `nav a` "current" `className`
          if (!content.is(".active")) {
            nav.removeClass("current");
          };
        }
      })
  } else {
    // if `curr` is not `elem`
    bg
      .finish().animate({
        top: -100
      }, function() {
        // set `curr` to `elem`
        curr = elem;
        // remove `content` `html`, toggle "active" `className`
        content.empty().toggleClass("active");
        fx(e); // call `fx`
      });
  };

});

nav {
  width: 200px;
  text-align: center;
}
nav a {
  font-size: 36px;
  text-decoration: none;
}
.current {
  color: violet;
}
.bg {
  background: olive;
  width: 200px;
  height: 100px;
  position: relative;
}
.content {
  display: none;
  background: tan;
  width: 200px;
  height: 100px;
  font-size: 36px;
  text-align: center;
  color: purple;
}
.content * {
  margin: 0 !important;
}

.content a {
  color:blue;
  font-style:italic;
}

Answer 3

这是一个解决方案，使标题保持固定的高度，在图像向下移动时隐藏图像的底部。

＆＃13;

$(document).ready(function() {
      $(".click-me").click(function() {
        $(".hidden-content").slideDown();
      });
    });

＆＃13;

header {
  height: 300px;
  overflow: hidden;
}
.menu {
  background-position: top;
  background-size: cover;
  min-height: 100px;
}
.hidden-content {
  display: none;
}
.hidden-content li {
  display: inline-block;
}

.banner {
  background-size: cover;
  padding-bottom: 42%;
  background-repeat: no-repeat;
  background-position: 0 -100px;
}

.click-me {
  display: block;
  position: absolute;
  top: 20px left: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <div class="menu" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/8d/Rocky_Mars_Surface.jpeg)">
    <a class="click-me" href="javascript:">
           menu item
        </a>
  </div>
  <!-- end menu -->
  <div class="hidden-content">
    <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" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/8d/Rocky_Mars_Surface.jpeg);">
    <!-- SAME IMAGE AS MENU BG IMAGE -->
  </div>
</header>

＆＃13;

分裂开放背景图像显示菜单

3 个答案: