就构造可折叠菜单而言，在构造HTML方面是否有“硬性规定”？

Question

查看React-md库提供的响应式导航组件，我发现Side导航是一个<div>，它被添加到DOM的标题下面，并通过动画。

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

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

是否有关于如何构造导航窗格的硬/快速规则？例如，可以这样构造：

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

有没有一种“最佳”方法来构造经验丰富的开发人员可能会选择的UI外壳/导航抽屉？

Answer 1

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

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

在滚动内容时是否可以快速渲染？滚动动画定位并不是一个好主意。

如果navPane应该是水平的而不是垂直的抽屉，我只会将header放在navPane中。

在我看来，这些是最有用的级联基础知识。数字3和4是我的最爱，从台式机到平板电脑再到移动设备，给人最好的“本机应用”感觉，您可能会有一个粘滞的标题，并且导航/边栏可以在移动设备上的内容上滑动。

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

1。侧边栏和主要内容上方/下方的完整页眉和页脚

<header/>
<content>
    <sidebar/>
    <main/>
</content>
<footer/>

2。侧栏全高，页眉仅位于主要内容上，页脚全角位于侧栏和内容下方

<sidebar/>
<content>
    <header/>
    <main/>
</content>
<footer/>

3。总宽度的页眉，主内容包装器的侧边栏全高，实际主内容下方的页脚

<header/>
<content>
    <sidebar/>
    <main-wrapper>
        <main/>
        <footer/>
    </main-wrapper>
</content>

4。侧边栏为全高度，页眉和页脚位于主要内容的上方/下方

<sidebar/>
<content>
    <header/>
    <main/>
    <footer/>
</content>

它将滚动到哪里？

3 可能实现的图像示例。

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

屏幕高一点，没有滚动。

更高的高度，页脚仍位于页面底部。

没有通过position: fixed进行任何定位，只有移动设备上的侧边栏内容需要fixed。滚动是通过在第一个换行display: flex; min-height: 100vh上设置div来控制的，接下来的display: flex; overflow: auto;中主要设置height: 100%来设置。

display: flex和overflow: auto利用树的向下滚动，因此不会滚动整个页面。