javascript - HTML 中的 UINavigationController 类型菜单

Question

我正在尝试创建一个带有某种导航的弹出菜单。为此，我想模仿 UINavigationController 的风格在 iOS 上。如果您不熟悉它，它会创建一个带有滑动页面的分层菜单，如下所示:
_{(来源:apple.com)}

我想用 HTML 和 JavaScript 制作类似的东西。我想从 iOS 设计中汲取的元素是

• 在页面之间移动时出现的滑动动画。
• 导航发生后出现的后退按钮

我需要一些不涉及页面刷新或在页面之间移动的东西，但菜单只需要一层深。有没有人用 JavaScript 创建过这种类型的菜单？我更喜欢 vanilla JS，但这不是必需的。

Answer 1

从该菜单构建一个散列，然后像这样遍历它。

首先，您显示哈希的第一级。当用户单击一个链接时，在该位置的散列中导航，获取所有子项并填充可见菜单后面的另一个菜单实例。

然后将新菜单移动到一侧以使其可见是一项简单的工作。

然后重复...

至于后退按钮，您只需获取散列中当前位置的父元素...