如何像移动应用一样创建侧边导航菜单？

Posted 2023-02-22

【中文标题】如何像移动应用一样创建侧边导航菜单？

【英文标题】：How to create a side navigation menu just like mobile apps?

【发布时间】：2019-03-16 08:11:19

【问题描述】：

我想创建一个网络应用 + 移动应用（混合应用）。所以我开始在 web 应用程序中使用 bootstrap + jQuery + Vuejs。现在我想创建一个导航菜单，它不会下拉，而是从左侧/右侧滑动，就像我们在几个移动应用程序中看到的那样。所以我决定使用一些框架来使它像移动应用程序并转向混合。有一个列表here 为这个问题引入了多个框架。那么首先哪个最适合混合应用程序？答案取决于您的需求所以我的需求非常简单，假设我只想让导航菜单从右向左滑动，而不是从上向下滑动。再次，如果它是可靠的，所以我选择了bootstrap.vuejs。现在如何创建该菜单？因为我在文档中找不到任何内容。

谢谢

【问题讨论】：

请花一些时间阅读帮助页面，尤其是名为"What topics can I ask about here?"、"What types of questions should I avoid asking?"的部分，更重要的是，请阅读the Stack Overflow question checklist。您可能还想了解Minimal, Complete, and Verifiable Examples。

【参考方案1】：

看看 Vuetify，它是一个组件框架，使您能够使用许多预制组件和布局。在您的情况下，默认布局已经具有您提到的侧面菜单。

向导：https://vuetifyjs.com/en/getting-started/quick-start

布局：https://vuetifyjs.com/en/layout/pre-defined

预览：https://vuetifyjs.com/en/examples/layouts/dark

我经常使用它，它对创建快速布局非常有帮助。除了主布局，您不需要使用库中的任何其他内容。

【参考方案2】：

如果您想在导航菜单上进行自定义，您不会想使用引导程序。你为什么不自己做一个？这是一个示例链接https://vue-burger-menu.netlify.com/