https://github.com/allnulled/angular-simple-nav-menu

Simple navigation menu implementation for AngularJS.
https://github.com/allnulled/angular-simple-nav-menu

Last synced: 1 day ago
JSON representation

Simple navigation menu implementation for AngularJS.

• Host: GitHub
• URL: https://github.com/allnulled/angular-simple-nav-menu
• Owner: allnulled
• Created: 2018-06-18T14:43:41.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-07T20:37:55.000Z (over 6 years ago)
• Last Synced: 2024-09-28T09:03:05.047Z (about 2 months ago)
• Language: JavaScript
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# angular-simple-nav-menu

Directives for AngularJS (version 1.x) to ease the creation of the typical navigation menu.

It is composed by 3 directives:

1.  ``: layer that will appear and disappear.

2.  ``: layer that, when clicked, will make the `` appear and disappear. Use it when the element must be inside the `` layer.

3.  ``: layer that, when clicked, will make the `` appear and disappear. Use it when the element must be outside the `` layer.

## 1. Installation

#### 1. Import the module from NPM:

~$ `npm install --save angular-simple-nav-menu`

#### 2. Import the module from your AngularJS application

##### 2.1. In your HTML:

...and after having imported the AngularJS (v.1.x):

```html

```

##### 2.2. In your JavaScript, when you initialize the application:

```js

angular.module("MyApp", ["SimpleNavMenu"]);

```

## 2. Usage

This is a self-explanatory example, using the directives as elements:

```html

	Shows/Hides the navigation menu when it is clicked.

	

		
Title of the navigation menu

		Item 1 of the navigation menu. Shows/Hides the navigation menu when it is clicked.

		Item 2 of the navigation menu. Shows/Hides the navigation menu when it is clicked.

		Item 3 of the navigation menu. Shows/Hides the navigation menu when it is clicked.

		Item 4 of the navigation menu. Shows/Hides the navigation menu when it is clicked.

	

```


You only need to know that:

* The directives can be used as attributes too.

* The width of the **`.nav-menu`** is set to **`250px`** in the css file. Override it from other stylesheet, or directly from the source file if you need to adapt it to other dimensions.

* The only 2 CSS rules applied are: **`.nav-menu--inner--api`** and **`.nav-menu--inner--api.activated`**. The CSS file is less than 10 lines, so you can modify it, but it should not be necessary, except for the `width` of the **``**.

## 3. Test

Currently, there are no test for this project.

However, you can open a very simple example if you go to: `test/simple-example.html`

It is important that your browser lets you load files from external CDN and from other (upper) paths for it to work. If so, you will be able to run the example okay.

## 4. Conclusion

Use this library as you like, this is a very simple module that can ease a bit the typical navigation menu for an AngularJS application.