专家!
我感到很失落,因为我想要复制Microsoft Azure导航,我不知道如何启动它或者如果我可以使用插件制作它。
如果你还没有看到它是一种滑动或刀片导航。每次按下选项,都会显示侧面的信息。
以下是一些截图:
我非常感谢你能给我的任何建议:)
答案 0 :(得分:5)
重新实施类似于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%。
不幸的是,我的公共网站上并不存在,所以我无法分享它的灵感。