Javascript Jquery带悬垂的滑动抽屉

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

编辑以添加：我所说的“悬垂”是什么意思

在下面的谷歌示例中，白色的应用程序抽屉位于底部，它永远不会完全消失。它的一部分挂在内容上，这样用户就可以在上面看到一些东西，再加上一个小提示，让它完全向上滑动。我希望我自己的滑块不完全消失，但留下一些像素的悬垂

以下是我成功用于抽屉的代码：

$（函数（）{
$（“a.toggle”）。单击（函数（）{
$（“.menu container”）.toggle（“幻灯片”{direction:'right'}，500）；
$（此）.toggleClass（“打开”）；
});
$（“.main navigation ul li a”）。单击（函数（）{
$（“.menu container”）.toggle（“幻灯片”{direction:'left'}，350）；
$（“a.toggle”）.toggleClass（“打开”）；
});
});
.menu容器{
位置：固定；
排名：0；
左：0；
右：0；
高度：999em；
背景：rgba（144,144,144,0.85）；
显示：无；
}
.menu容器ul{padding:2em；}
.切换{
背景：红色；
颜色：#fff；
光标：指针；
填充：1em；
变换：旋转（-90度）；
位置：绝对位置；
z指数：999；
最高：50%；
右：0；
}

菜单

菜单项1

你可以用10种不同的方法来实现这一点，但这取决于你的情况。这总是有点像变戏法但是看看翻译。这就是我要用的


var thing=document.querySelector（'[rel=“clicky thing”]'）；
thing.addEventListener（'click'，函数（事件）{
event.target.classList.toggle（'open'）；
});
正文{
保证金：0；
}
* {
框大小：边框框；
}
.菜单{
边界半径：10px；
边框：1px纯蓝色；
填充：1rem；
最小高度：400px；/*任意*/
/* */
宽度：计算（100%-20px）；
位置：绝对位置；
最高：100%；
左：10px；
光标：指针；
/* */
过渡：.2s；
转换：translateY（-200px）；
}
.菜单：未打开（.open）{
转换：translateY（-50px）；
}

这是菜单。。。而且里面会有东西
你所说的悬挑是什么意思？好问题-很难描述它的名称。白色的应用程序抽屉位于底部，它永远不会完全消失。它的一部分挂在内容上，这样用户就可以在上面看到一些东西，再加上一个小提示，让它完全向上滑动。我希望我自己的滑块不会完全消失，但会留下一些悬垂的像素（我将采用与谷歌类似的样式），也许我们会称之为“标签”或其他东西……很好的解决方案，我感谢你将其重命名为标签。昨晚我疲惫的大脑无法到达那里。干杯对于没有可见选项卡的菜单，也可以使用相同的方法。：）有很多方法都有其优缺点。这里有一个例子：使用一个按钮（这可能是正确的方式），然后如果你有客户端路由。。。您还可以将该函数附加到链接的事件。：）你也可以研究这类东西的触摸手势。你帮了我大忙，我真的很感谢你让我走上了正确的道路。我正在学习如何真正编写自己的javascript/jQuery任务，而不仅仅是复制现有函数的片段。谢谢你帮我学习~