javascript - 带悬垂的jquery滑动抽屉

Question

我正在使用 JQuery 幻灯片效果创建一个切换菜单。我试图让折叠菜单显示出一点悬垂，以便用户在关闭时仍能看到一些抽屉背景。

编辑添加:“悬垂”是什么意思？

In the Google example below, the white app drawer is present at the bottom, it never fully disappears. A piece of it hangs over the content so users can see a few things on it plus a small prompt to slide it up fully. I’d like my own slider to not fully disappear but leave some pixels of overhang.

这是我成功用于抽屉的代码:

$(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 map 移动抽屉为例):

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