🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The jQuery Plugin for generating nav links from page elements. For example, generate links to all the articles on a page by linking to the article’s h1’s, and put them in a nav element on the page with an id of article-nav. (By default, the links will use the same text as the h1).

Plugins

Documentation

MagicNav.js

The jQuery Plugin for generating nav links from page elements

Demo Page: http://johnpolacek.github.com/MagicNav.js ------

Basic Usage

Easily generate links from elements on your page. For example, generate links to all the articles on a page by linking to the article’s h1’s, and put them in a nav element on the page with an id of article-nav. (By default, the links will use the same text as the h1).

```javascript var magicNav = $.MagicNav($('#article-nav'),$('article h1')); ```

The first argument to $.MagicNav is a selector for the element to which the links will be appended. The second is a selector for the elements from which the plugin should build the links. The third is a settings object (optional).

Custom Settings

There are a few options available when initializing the plugin:

  • titles - By default, MagicNav grabs the text for the links from the target elements, but you may alternatively use an attribute instead (e.g. 'data-title')
  • ease - An ease function for the scrollTo animation (default is easeInOutQuad)
  • duration - The duration of the scrollTo animation (in milliseconds)
  • offset - The amount of vertical offset to apply when scrolling to the target element (in pixels, default is 0)

Here’s an example applying some custom options:

```javascript var magicNav = $.MagicNav($('#article-nav'),$('article h1'),{ titles: 'data-title', ease: function (x, t, b, c, d) { // easeOutQuad return -c *(t/=d)*(t-2) + b; }, duration: 500, offset: -60 }); ```

You May Also Like