Выдвижной ящик Jquery с выступом

Question

Я создаю переключаемое меню, используя эффект слайда JQuery. Я пытаюсь заставить меню свертывания показывать немного зависания, чтобы пользователь все еще видел немного фона ящика, когда он закрыт.

РЕДАКТИРОВАТЬ ДОБАВИТЬ: Что я имею в виду под " выступом" "?

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

Вот код, который я успешно использую для ящика:

$(function () {
  $("a.toggle").click(function () {
	$(".menu-container").toggle("slide", {direction:'right'}, 500);
	$(this).toggleClass("open");
  });

  $(".main-navigation ul li a").click(function () {
	$(".menu-container").toggle("slide", {direction:'left'}, 350);
	$("a.toggle").toggleClass("open");
  });
});

.menu-container {
	  position:fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 999em;
    background: rgba(144, 144, 144, 0.85);
    display:none;
}
.menu-container ul{padding:2em;}
.toggle{
  background:red;
  color:#fff;
  cursor:pointer;
  padding:1em;
  transform: rotate(-90deg);
  position:absolute;
  z-index:999;
  top:50%;
  right:0;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a class="toggle">Menu</a>
<div class="menu-container">
<ul>
<li>Menu Item 1</li>
</ul>
</div>

Вот как я на самом деле хочу, чтобы он функционировал (в качестве примера я показываю мобильный ящик Google Карт):

• Белый ящик внизу имеет несколько ссылок на настройки
• Маленький серый тикет на белом ящике позволяет провести контейнером вверх, чтобы занять весь экран
• Возможно ли это для jQueryКонтейнер, который я переключаю, скользя внутрь и наружу, чтобы иметь такой вылет, чтобы пользователи могли видеть его даже в закрытом состоянии?

Answer 1

Вы можете сделать это 10 различными способами - но все зависит от вашей ситуации. Это всегда немного жонглирование. - но проверить перевод. Вот что я бы использовал.

var thing = document.querySelector('[rel="clicky-thing"]');

thing.addEventListener('click', function(event) {
	event.target.classList.toggle('open');
});

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.menu {
  border-radius: 10px;
  border: 1px solid blue;
  padding: 1rem;
  min-height: 400px; /* arbitrary */
  /* */
  width: calc(100% - 20px);
  position: absolute;
  top: 100%;
  left: 10px;
  cursor: pointer;
  /* */
  transition: .2s;
  transform: translateY(-200px);
}

.menu:not(.open) {
  transform: translateY(-50px);
}

<nav class='menu' rel='clicky-thing'>
  this is a menu... and it would have stuff in it
</nav>

пример с кнопкой: https://jsfiddle.net/sheriffderek/zwq2okev/