带有悬垂的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 地图移动抽屉为例）：

• 底部的白色抽屉有几个设置链接
• 白色抽屉上的小灰色tictac让您可以向上滑动容器以占据整个屏幕
• 我正在滑入和滑出的 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/