javascript - 制作 Azure 导航门户

Question

伙计们!

我感到非常迷失，因为我想复制 Microsoft Azure 导航，但我不知道如何开始它，也不知道是否可以使用插件来实现它。

如果您还没有见过，它是一种滑动或 Blade 导航。每次按下选项时，都会在侧面显示信息。

以下是一些屏幕截图:

我真的很感谢您向我提供的任何建议:)

Answer 1

重新实现了与 Azure 类似的布局后，您可能会看看 Start Screen demo 是如何工作的。在 Metro UI CSS Framework 中实现.

来自this blog的一些背景想法底部的视频还让我们对 Azure 设计概念的形成有了更多的了解。

最终，我的工作方式与 Azure 的工作方式类似，因为我有一组导航“ Blade ”，它们位于左侧并根据选项延伸，并在 Angular 中拥有一个状态管理系统，主要处理其余部分 Blade 被水平渲染为 ul 中的 li 元素。每个 Blade 内都有一组垂直渲染的组，这些组由位置管理器处理，以确定单元内从上到下的位置。

与 Azure 类似，我用 TypeScript 和 AngularJS 编写了我的代码，并使用 LESS 来处理所有样式。最棘手的部分可能是“通用化”其中的大部分内容，这样您就不必继续重写轮子，而是可以拥有您希望显示的 Blade 内容的特定“类型”，然后让每个内容动态渲染和检索内容因为他们被导航到。

我有许多 div 元素，可以有效地将高度保持在 100%，然后将导航栏放在顶部。我的左侧导航栏是个异常(exception)，因为它通常被最小化，并且只提供网站关键“门户”之间的路由。我的 ul 在左上角有一个绝对位置，同样具有 100% 的高度，并且其中的每个 li 都有一个基于多个模板尺寸的尺寸(就像 Azure 有一些非常窄的 Blade 用于设置，而在设置时则有较大的 Blade )从表中选择数据)。 Blade 本身相对定位，设置在左上角，并且高度也为 100%。

不幸的是，我的网站并不存在于面向公众的网站上，因此我无法分享它以获取灵感。