制作Azure导航门户

Question

专家！

我感到很失落，因为我想要复制Microsoft Azure导航，我不知道如何启动它或者如果我可以使用插件制作它。

如果你还没有看到它是一种滑动或刀片导航。每次按下选项，都会显示侧面的信息。

以下是一些截图：

我非常感谢你能给我的任何建议：）

Answer 1

重新实施类似于Azure的布局后，您可以查看Start Screen demo中Metro UI CSS Framework的实施方式。

this blog的一些背景构思和底部的视频也为Azure设计概念的形成提供了一些额外的见解。

最终，我制作了类似Azure的工作方式，因为我有一组导航“刀片”，它们保留在左侧并根据选项延伸出来，并在Angular中有一个状态管理系统，主要处理其余的刀片水平渲染为ul中的li元素。每个刀片中都有一组垂直渲染的组，由位置管理器处理，以确定单元格中从上到下的放置。

与Azure类似，我在TypeScript和AngularJS中编写了我的内容，并将LESS用于所有样式。最棘手的部分可能就是“泛化”这么多，这样你就不会继续重写轮子，而是可以拥有你希望展示的刀片内容的特定“类型”，然后每个都动态渲染和检索内容当他们被导航到。

我有一些div元素有效地将高度保持在100％，然后将导航栏放在顶部。我的左侧导航栏更为例外，因为它通常被最小化，并且只提供站点的关键“门户”之间的路由。我有一个在左上角有绝对位置的ul，再次有100％的高度，并且其中的每个li都有一个基于几个模板大小的大小（正如Azure有一些非常窄的刀片设置和更大的时候从表中选择数据）。刀片本身相对定位，设置在左上方，并且高度也是100％。

不幸的是，我的公共网站上并不存在，所以我无法分享它的灵感。