html - 在为可折叠菜单构建 HTML 方面是否有任何 'hard and fast rules'？

Question

研究响应式导航组件，例如 React-md 提供的组件图书馆，我看到侧面导航是 <div>它被添加到标题下方的 DOM 中，并通过动画显示在适当的位置。

所以在这种情况下导航的结构是:

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

关于如何构建导航 Pane 是否有任何硬性/快速规则？例如，可以这样构造:

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

是否有经验丰富的开发人员可能知道选择的构建 UI 外壳/抽屉导航的“最佳”方法？

Answer 1

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

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

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

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

在我看来，这些是最有用的级联基础知识。数字 3 和 4 是我的最爱，从桌面到平板电脑到移动设备都提供最好的“ native 应用程序”感觉，您可以有一个粘性标题，导航/侧边栏可以在移动设备上滑动内容。

以下是伪 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定位的，只有移动设备上的sidebar-over-content需要fixed。滚动是通过设置 display: flex; 来控制的； min-height: 100vh 在第一个包装 div 中，在接下来的 display: flex; overflow: auto; 主要是 height: 100%。

display: flex 和 overflow: auto 利用向下滚动树，所以不是整个页面滚动。

图像示例的线框:

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

它有显示加载、错误状态(等等)的边界。这些是 content-pane、content、editor-pane，editor-panes 可以有 n 个侧边栏并包含带有 footer 的实际 content。