制作Azure导航门户

时间:2016-04-12 03:16:19

标签: javascript jquery angularjs azure

专家!

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

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

以下是一些截图:

Screenshot 1

Screenshot 2

Screenshot 3

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

1 个答案:

答案 0 :(得分:5)

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

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

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

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

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

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