将网站调整为移动视图大小时，导航栏之类的应用

Question

我正在使用HTML，CSS和JavaScript创建一个静态网站。在“桌面” /“平板电脑” /“移动设备”视图中调整大小和测试时，网站具有完全响应能力。
我正在努力找出的是如何调整导航栏（菜单）的大小，以便在使用台式机/平板电脑视图时，它看起来像是普通的网站导航栏，然后当我尝试移动视图时，像应用程序一样。当您进入诸如takealot.com网站之类的网站时。

This is the normal top navbar for desktop/tablet view

This is the bottom navbar that i am intending on doing

请提出可能的解决方案

Answer 1

有很多方法可以实现这一目标，但是在开始查看要/需要走的路线之前，您需要做一些计划。

问问自己：

• 两种不同的导航解决方案是否包含相同的内容？
• 两种不同的导航解决方案可以包含相同的代码层次结构吗？

如果答案是“否”，我将创建两个不同的html组件并动态隐藏/显示，然后根据媒体查询的视口大小进行选择。

如果两个答案都是“是”，则您可能必须仔细计划标记的语法，以便导航项可以类似地显示（尽管您将100％需要使用媒体查询来更改< em> look ，取决于视口的大小。

如果您在将它们显示在不同区域时遇到麻烦（顶部较大的视口，底部较小的视口），请尝试使用position: absolute;甚至flexbox来交换元素的显示顺序。