Html 如何使用CSS使菜单像纸一样折叠？

我想制作一个导航菜单，它只使用CSS像纸一样展开，看起来像这样：因为它主要使用CSS来创建过渡效果

不幸的是，我得到的效果仍然不太好，它是这样的：。有空格显示，并且

li

不粘在一起。理想情况下，我想使效果显示在子菜单以及

我总结了代码以显示所涉及的转换和转换css：

//导航按钮切换
jQuery（'.dropdown toggle'）.on（'click'，function（）{
jQuery（this.toggleClass（'active'）；
});
。下拉切换{
颜色：#ecf0f1；
填充：12px0；
}
.dropdown-toggle.acitve{
颜色：#bdc3c7
}
.托格里布尔{
-webkit转换：最大高度.75s缓进-缓出，-webkit转换.75s缓进-缓出，可见性.75s缓进-缓出；
过渡：最大高度。75秒缓进缓出，变换。75秒缓进缓出，可见性。75秒缓进缓出；
-webkit转换原点：顶部；
变换原点：顶部；
-webkit透视图：320px；
透视图：320px；
-webkit转换：scaleY（0）；
变换：scaleY（0）；
列表样式：无；
位置：相对位置；
保证金：0；
填充：0
}
.下拉切换.活动+.可切换{
能见度：可见；
最大高度：1200px；
-webkit转换：scaleY（1）；
变换：scaleY（1）
}
.导航主{
利润率：30px 10px；
文本对齐：居中；
职位：相对
}
#菜单主切换{
边界：0；
背景色：#e74c3c；
宽度：100%；
边框底部：1px虚线#c0392b；
}
#主菜单{
宽度：100%；
位置：绝对位置
}
#主菜单，
.托格里布尔{
职位：相对
}
.下拉开关，
.菜单项{
背景：#e74c3c
}
.菜单项{
边框顶部：1px虚线#c0392b；
转换：转换。75秒缓进缓出；
}
.dropdown-toggle.active+#菜单主菜单项{
变换：旋转（0度）；
}
.奇怪{
变换：rotateX（-90度）；
}
.甚至{
变换：rotateX（90度）；
}
.菜单项{
边框顶部：无
}
.菜单链接{
显示：块；
填充：12px0；
颜色：#ecf0f1
}
.菜单链接：活动{
颜色：#fbfcfc
}

菜单








我通过使用负边距解决了这个问题，并用转换到转换所需的相同时间将其转换为负边距（解决方案归功于@GCyrillus的代码笔）。当边距折叠时，我将边距设置为菜单项大小的两倍，这样就完美了。这是我能得到的最接近预期效果的，尽管我更希望得到Felix Niklas插件的效果。我认为它也使用阴影，但这不能用纯CSS实现，因为转换是线性的

你可以纠正我说过的任何一句话，或者补充我的代码


//导航按钮切换
jQuery（'.dropdown toggle'）.on（'click'，function（）{
jQuery（this.toggleClass（'active'）；
});
。下拉切换{
颜色：#ecf0f1；
填充：12px0；
}
.dropdown-toggle.acitve{
颜色：#bdc3c7
}
.托格里布尔{
-webkit转换：最大高度.75s缓进-缓出，-webkit转换.75s缓进-缓出，可见性.75s缓进-缓出；
过渡：最大高度。75秒缓进缓出，变换。75秒缓进缓出，可见性。75秒缓进缓出；
-webkit转换原点：顶部；
变换原点：顶部；
-webkit转换：scaleY（0）；
变换：scaleY（0）；
列表样式：无；
位置：相对位置；
保证金：0；
填充：0
}
.可折叠的，可折叠的{
-webkit变换原点：中心；
变换原点：中心；
}
.下拉切换.活动+.可切换{
能见度：可见；
最大高度：1200px；
-webkit转换：scaleY（1）；
变换：scaleY（1）
}
#导航主{
利润率：30px 10px；
文本对齐：居中；
职位：相对
}
#菜单主切换{
边界：0；
背景色：#e74c3c；
宽度：100%；
边框底部：1px虚线#c0392b；
高度：50px；
}
#主菜单{
宽度：100%；
位置：绝对位置
}
.下拉开关，
.菜单项{
背景：#e74c3c
}
.菜单项{
边框顶部：1px虚线#c0392b；
高度：50px；
过渡：变换.75秒缓进缓出，边距.75秒缓进缓出；
}
#菜单main.menu-item.odd{
-webkit变换：透视（320px）旋转（90度）；
变换：透视（320像素）旋转（90度）；
-webkit转换原点：底部；
变换原点：底部；
利润上限：-100px
}
#主菜单。菜单项。偶数{
-webkit变换：透视（320px）旋转（-90度）；
变换：透视（320px）旋转（-90度）；
-webkit转换原点：顶部；
变换原点：顶部；
保证金底部：-100px
}
#导航主菜单。下拉菜单-toggle.active+。toggleable.菜单项{
-webkit变换：透视（320px）旋转（0deg）；
变换：透视（320像素）旋转（0度）；
保证金：0
}
.菜单项{
边框顶部：无
}
.菜单链接{
显示：块；
填充：12px；
颜色：#ecf0f1
}
.菜单链接：活动{
颜色：#fbfcfc
}

菜单








我现在没有时间给出一个完整的答案，但我在codepen上做了一个很接近你想要的东西：。不管怎么说，这可能足以让你开始学习。纸质书是麻省理工学院授权的，可以免费使用，并可归因于作者。源代码在GitHub上，因此您可以确切地看到它们是如何实现效果的（少于300行）。在您的示例中，您已经依赖jQuery了；为什么不利用Paperfold并尝试添加子菜单？@Sam我宁愿使用样式表而不是使用jQuery来创建内联样式。它使用CSS的动画无论如何。我