制作Azure导航门户

Question

伙计们!

我觉得很失落,因为我想复制Microsoft Azure导航,我不知道如何开始它或如果我可以使用插件.

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

以下是一些截图:

我非常感谢你能提供给我的任何建议:)

Answer 1

重新实现了类似于Azure的布局后，您可以查看如何在Metro UI CSS Framework中实现“ 开始屏幕”演示。

该博客和底部视频中的一些背景思想还使人们对Azure设计概念如何产生有了更多的了解。

最终，我使我的工作类似于Azure的工作方式，因为我有一组导航“刀片”，这些刀片位于左侧，并根据选项进行扩展，并且在Angular中具有状态管理系统，该系统可以在很大程度上处理其余的刀片。在ul中作为li元素水平呈现。每个刀片内有一组垂直渲染的组，这些组由位置管理器处理，以确定单元内从上到下的位置。

与Azure类似，我用TypeScript和AngularJS编写了我的代码，并使用LESS进行所有样式设置。最棘手的部分可能是“泛化”了很多内容，这样您就不必继续重写轮子，而是可以拥有想要显示的刀片内容的特定“类型”，然后分别动态地渲染和检索内容。当他们导航到。

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

不幸的是，我的不存在于面向公众的网站上，所以我将无法分享它的灵感。