javascript - angularjs移动网站: fix top bar with sliding menu

Question

我正在尝试使用 Angularjs 实现移动网站。 我想使用这种结构:

• 顶部固定杆
• 带有从左向右滑入的菜单(点击 Logo )
• 右侧可能还有一个下拉菜单。

类似于 Gmail:

基本上，一种(Android)操作栏，但适用于移动网站。

由于我不想重新发明轮子，是否有任何好的引用或种子元素可供我使用？

Answer 1

1. 顶部固定栏:使用 bootstrap，它已经有一个固定导航栏作为“navbar-fixed-top”...见here

2. 幻灯片菜单:有一个很棒的 angularjs 插件可以做到这一点:Angular-snap.js

按照此处的步骤操作...您必须添加三个主要文件:angular-snap.js、snap.js 和 angular-snap.css，并将“snap”模块添加为 app.js 中的依赖项文件:

angular.module('myApp', ['snap']);

完成。您在主代码中只需要一个抽屉和一些内容:

<snap-drawer>
  I'm in a drawer!
</snap-drawer>

<snap-content>
  I'm your main content!
</snap-content>

1. 右侧的下拉菜单:再次在 bootstrap 中...输入 this在固定导航栏中