4+ Angular 2 Floating Menus

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

Angular2 Floating Buttons Menu
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.

Code + Demo Demo2

2. Sticky NG2-UI

Sticky NG2-UI
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”.

Code + Demo

3. ngx Right Click Context Menu

ngx Right Click Context Menu
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.

Code Demo

4. Angular2 Sliding Navigation

Angular2 Sliding Navigation
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.

Code + Demo

5. ng2 Sticky

ng2 Sticky
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.

Code

6. Angular 2 Sticky Header

Angular 2 Sticky Header
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.

Tutorial Code

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *