有没有'；硬性规定'；为了一个可折叠的菜单而构造HTML？

查看响应导航组件，例如库提供的导航组件，我看到侧导航是一个

，添加到DOM的标题下，并通过动画显示到位

因此，在这种情况下，导航的结构是：

<div>
  <header />
  <div id="nav" />
</div>

关于如何构造导航窗格，是否有任何硬性规定？例如，可以这样构造：

<div>
  <header>
    <navPane style={left: -200px, display static}>
  </hader>
</div>

---

是否有一种“最佳”的方法来构造UI外壳/导航抽屉，经验丰富的开发人员可能知道如何选择它？

这实际上取决于您的页面在哪些设备上的外观

如果内容太多，它应该在哪里滚动

它应该在滚动内容时快速渲染吗？onscroll动画定位不是一个好主意

如果

导航窗格

应该是水平的，而不是垂直的抽屉，我只会将

导航窗格

放在

标题

中

在我看来，这些是最有用的级联基础。第3和第4是我的最爱，从桌面到平板电脑再到手机，都能给人以最好的“原生应用”感觉，你可以有一个粘性的标题，导航/侧边栏可以在手机上的内容上滑动

下面是伪HTML，所以我不需要类或div，侧边栏可以包含一个导航抽屉。线框为平板电脑/台式机

1.边栏和主要内容上方/下方的全宽页眉和页脚

2.边栏全高，页眉仅在主要内容上方，页脚在边栏和内容下方全宽

3.页眉为全宽，边栏为主内容包装的全高，页脚低于实际主内容

4.全高边栏，主内容上方/下方的页眉和页脚

它将滚动到哪里？ 使用3可以实现的图像示例

• 标题停留在顶部
• 边栏和内容可以独立滚动
• 页脚位于内容的底部，但不在内容的上方-当内容足够大，可以滚动时

屏幕高度稍大一点，没有滚动。

高度越高，页脚仍在页面底部

没有任何东西是通过

position:fixed

定位的，只有手机上内容的侧栏需要

fixed

。通过设置

display:flex控制滚动；最小高度：100vh

在第一次包装时

div

，在下一次包装时

显示：flex；溢出：自动高度：100%

display:flex

和

overflow:auto

利用了向下滚动树的功能，因此不会滚动整个页面

用于图像的线框示例：

它比单独的3稍微复杂一些，但它是基于3的

---

它有显示加载、错误状态（等等）的边界。这些是

内容窗格

，

内容

，

编辑器窗格

，

编辑器窗格

可以有n个侧栏，包含实际的

内容

，页脚，

我有点希望看到一个神奇的“这是正确完成它的唯一方法”。但我真的没想到会有这样的事。非常感谢你的回答。不同布局上的图表非常有用。我有（4）方面的经验。但我也喜欢数字3。实际上，我正在研究使用其他尚未制作导航组件的组件库（IBM的carbon design），这就是为什么我正在研究如何实现它的选项图像实际上看起来像嵌套在数字（3）中的数字（4）？我添加了图像的线框，并给出了解释，与2最大的区别是n边栏和边界。可悲的是（或者说是好的？）一个唯一的UI样式设计方法并不存在，即使是技术需求也可能导致“哦，我必须改变那个”。并非每个软件和用户流/工作流都从相同的布局中获益，有些需要，有些需要。