时间戳

首页 > 解决方案 > 出于可折叠菜单的目的，在构建 HTML 方面是否有任何“硬性规则”？

html - 出于可折叠菜单的目的，在构建 HTML 方面是否有任何“硬性规则”？

问题描述

查看响应式导航组件，例如由React-md库提供的，我看到侧边导航是一个<div>添加到 DOM 中的标题下方，并通过动画显示在适当的位置。

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

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

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

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

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

标签： htmlcss

解决方案

这实际上取决于您的页面在哪些设备上应该是什么样子。

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

它应该在滚动内容时快速呈现吗？然后滚动动画定位不是一个好主意。

如果应该是水平的而不是垂直的抽屉，我只会把它放在navPane里面。headernavPane

在我看来，这些是最有用的级联基础知识。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利用向下滚动树，所以不是整个页面滚动。

图像示例的线框： 在此处输入图像描述

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

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

推荐阅读