What the heck is a Angular 2 Floating Menu you might be saying? Well, I think i can also be called a sticky menu or a hovering menu or something haha… Basically it means you want your menu and/or menu buttons to be visible on the screen, like the first example when you click the menu button it opens up the menu items to float above. To built a floating menu is the same as the usual setup with a li class items inside a container div and some toggled styling.
1. Angular2 Floating Buttons Menu
Material design floating action button implemented as an Angularjs directive. Inspired by action buttons from Google Inbox, Evernote and Path. Made to be fast and easy to customise. It works out of the box with no other dependency apart from Angular, but plays nicely with the Angular Material bundle, for which it has dedicated templates.
2. Sticky NG2-UI
ngui is a collection of quality Angular2 directives. To make ngui available to your project, you need to install a npm package “@ngui/ngui”.
3. ngx Right Click Context Menu
A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu. Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap.
4. Angular2 Sliding Navigation
Animations in Angular 2 are probably easier than you think. In this tutorial we will create a simple side navigation that will leave and enter the screen from the right side. We will use Angular-CLI and TypeScript but you should also be able to adopt the steps to any other project like Ionic 2.
5. ng2 Sticky
Angular Sticky (no jQuery is required) makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position.
6. Angular 2 Sticky Header
How do you make a header stick to the top when scrolling down, in an Angular2 application? The first thought was to create a normal eventListener on window that called a function to do the “magic” and set a property to true|false.