Я пытаюсь создать меню типа 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>

Спасибо заранее.

0
rlm 15 Апр 2016 в 03:31

3 ответа

Лучший ответ

Закройте div#menu перед div.hidden Я использовал вместо изображения цвет, чтобы вы могли проверить, как это работает

$(".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>
1
Hakan Kose 15 Апр 2016 в 01:00

Вы можете использовать .animate(), .is(), .siblings(), .addClass(), .removeClass(), .toggleClass(), .data(), .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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  <nav>
    <!-- define content to display at `data-*` -->
    <a href="#" data-content="<p>A<a href='#abc'>abc</a></p>">a</a> 
    <a href="#" data-content="<div>B</div>">b</a>
    <a href="#" data-content="<h2>C</h2>">c</a>
    <a href="#" data-content="<mark>D</mark>">d</a>
    <a href="#" data-content="<img src='' alt='E' style='background:gold;width:50px;height:50px;'>">e</a>
    <a href="#">f</a>
    <a href="#" data-content="<h1>G</h1>">g</a>
  </nav>
  <div class="bg"></div>
  <div class="content"></div>
  <div class="bg"></div>
  <div id="abc">123</div>
</body>
1
guest271314 15 Апр 2016 в 04:07

Вот решение, которое сохраняет заголовок с фиксированной высотой, скрывая нижнюю часть изображения по мере его движения вниз.

$(document).ready(function() {
      $(".click-me").click(function() {
        $(".hidden-content").slideDown();
      });
    });
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;
}
<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>
0
Max Oriola 16 Апр 2016 в 05:43