https://github.com/tefra/navgoco
Multi-level slide navigation with session storage and accordion effect for JQuery
https://github.com/tefra/navgoco
Last synced: over 1 year ago
JSON representation
Multi-level slide navigation with session storage and accordion effect for JQuery
- Host: GitHub
- URL: https://github.com/tefra/navgoco
- Owner: tefra
- License: bsd-3-clause
- Created: 2013-07-05T00:17:22.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2016-11-08T07:34:29.000Z (over 9 years ago)
- Last Synced: 2025-03-29T17:11:09.654Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://www.komposta.net/article/navgoco
- Size: 517 KB
- Stars: 237
- Watchers: 26
- Forks: 93
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE-BSD
Awesome Lists containing this project
README
[](http://www.komposta.net/article/navgoco)
# {:navgoco} [](https://travis-ci.org/tefra/navgoco)
Navgoco is a simple JQuery plugin which turns a nested unordered list of links
into a beautiful vertical multi-level slide navigation, with ability to preserve
expanded sub-menus between sessions by using cookies and optionally act as an accordion
menu.
**[Demo](http://apps.komposta.net/jquery/navgoco/demo)** | **[Homepage](http://www.komposta.net/article/navgoco)**
## Getting Started
Download the plugin, unzip it and copy the files to your application directory and load them inside your HTML.
```html
```
Sample menu html and activation code:
```html
$(document).ready(function() {
$('.nav').navgoco();
});
```
You can also extend the default options:
```html
$(document).ready(function() {
$('.nav').navgoco({
caretHtml: '<i class="some-random-icon-class"></i>',
accordion: false,
openClass: 'open',
save: true,
cookie: {
name: 'navgoco',
expires: false,
path: '/'
},
slide: {
duration: 400,
easing: 'swing'
}
});
});
```
## Options
You can pass these options as key/value object during activation to alter the default behaviour.
----------
#### caretHtml
* **Type:** `string`
* **Default:** ``
Raw html to inserted in the caret markup of the parent links:
`Item{:caretHtml}`
#### accordion
* **Type:** `boolean`
* **Default:** `false`
Enable accordion mode.
----------
#### openClass:
* **Type:** `string`
* **Default:** `open`
CSS class to be added in open parent li.
----------
#### save:
* **Type:** `boolean`
* **Default:** `true`
Preserve expanded sub-menus between session. If jquery.cookie is not included it will be automatically turned off.
----------
#### cookie:
* **Type:** `object`
* `name`: Cookie name
* *Type:* `string`
* *Default:* `navgoco`
* `expires`: Lifespan in days, `false` makes it a session cookie
* *Type:* `integer|false`
* *Default:* `false`
* `path`: Path where cookie is valid
* *Type:* `string`
* *Default:* `/`
----------
#### slide:
* **Type:** `object`
* `duration`: Slide duration in milliseconds
* *Type:* `integer`
* *Default:* `400`
* `easing`: Slide easing function (linear|swing) for the transition
* *Type:* `string`
* *Default:* `swing`
## Callbacks
With the options you can also pass callback functions to extend the plugin's functionality.
#### onClickBefore:
This callback is executed before the plugin's main procedure when clicking links.
* **Parameters**
* `Event`: `Event Object`
* `Submenu`: False if the clicked link is a leaf or the next `sub-menu` if link is a branch.
----------
#### onClickAfter:
This callback is executed after the plugin's main procedure when clicking links.
* **Parameters**
* `Event`: `Event Object`
* `Submenu`: `False` if the clicked link is a leaf or the next `sub-menu` if link is a branch.
----------
#### onToggleBefore:
This callback is executed before the plugin's main procedure when toggling sub-menus.
* **Parameters**
* `Submenu`: `JQuery Object`
* `Opening`: `True|False` the submenu is opening or closing
----------
#### onToggleAfter:
This callback is executed after the plugin's main procedure when toggling sub-menus.
* **Parameters**
* *Submenu:* `JQuery Object`
* *Opened:* `True|False` the submenu opened or closed
## Public Methods
#### toggle
Manually open or close sub-menus.
* Parameters:
* `boolean`: Show or hide
* `Variable list of indexes`: If omitted toggles **all sub-menus**
* `integer`
* `...`
* `integer`
```js
// Show|Hide all sub-menus
$(selector).navgoco('toggle', true|false);
```
```js
// Show|Hide sub-menus with specific indexes
// It will also open parent sub-menus since v0.1.2
$(selector).navgoco('toggle', true|false, 1, 2, ...);
```
----------
#### destroy
Destroy instances and unbind events.
```js
// I can't think of any other use except for testing...
$(selector).navgoco('destroy');
```
## Contributing
#### Code style
Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
#### Modifying the code
First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed.
Test that Grunt's CLI is installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing Grunt, see the [getting started guide](http://gruntjs.com/getting-started).
1. Fork and clone the repo.
1. Run `npm install` to install all dependencies (including Grunt).
1. Run `grunt` to grunt this project.
Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken.
#### Submitting pull requests
1. Create a new branch, please don't work in your `master` branch directly.
1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail.
1. Fix stuff.
1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done.
1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere.
1. Update the documentation to reflect any changes.
1. Push to your fork and submit a pull request.