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).
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 }); ```