|
1 | | -# Vanilla JS - Magic Line Navigation |
2 | | -original idea: https://css-tricks.com/jquery-magicline-navigation/ |
3 | | - |
4 | | -[](https://www.codefactor.io/repository/github/basticodes/vanilla-js-magic-line-navigation) |
5 | | - |
6 | | -## Browser Support |
7 | | - |  |  |  |  |  |
8 | | ---- | --- | --- | --- | --- | --- | |
9 | | -< 15 ✔ | 5+ ✔ | 10+ ✔ | < 15 ✔ | < 23 ✔ | 5.1+ ✔ | |
10 | | - |
11 | | -To get IE Support below Version 10 (or any other browser that does not support Element.Classlist) use a Classlist Polyfill. |
12 | | - |
13 | | -## Dependencies |
14 | | -* None |
15 | | - |
16 | | -However you can implement every Animation Library like anime.js for the animations. |
17 | | - |
18 | | -## Usage |
19 | | -```javascript |
20 | | -var myMagicLine = new magicLine( |
21 | | - document.querySelectorAll('.floating-line-menu'), |
22 | | - { |
23 | | - navElements: 'a', // navigation element selector |
24 | | - mode: 'line', // line or pill |
25 | | - lineStrength: 2, // Thickness of the line |
26 | | - lineClass: 'magic-line', // Classname to add to the line element |
27 | | - wrapper: 'div', // the node that's being created as an element wrapper |
28 | | - animationCallback: function (el, params) { // might be either null or a callback function |
29 | | - animationLibrary({ |
30 | | - targets: el, |
31 | | - left: params.left, |
32 | | - top: params.top, |
33 | | - width: params.width, |
34 | | - height: params.height |
35 | | - }); |
36 | | - } |
37 | | - } |
38 | | -); |
39 | | -myMagicLine.init(); |
40 | | -``` |
41 | | - |
42 | | -## Options |
43 | | -| Option | Value | Default | |
44 | | -| ----------------- |---------------------------------------------------------------|-----------------| |
45 | | -| navElements | a query Selector, you can even define multiple like 'a, span' | 'a' | |
46 | | -| mode | might be either 'line' or 'pill' | 'line' | |
47 | | -| lineStrength | thickness of your line in px | 2 | |
48 | | -| lineClass | The classname of the floating-line element | 'magic-line' | |
49 | | -| wrapper | DOMNode to be inserted as a wrapper | 'div' | |
50 | | -| animationCallback | a callBack Function used for animation | null | |
51 | | - |
52 | | -## This is how it looks like |
53 | | - |
54 | | - |
55 | | -Check out the [Demo](https://codepen.io/bastian_fiessinger/full/MWYMWJN) on Codepen |
| 1 | +# Vanilla JS - Magic Line Navigation |
| 2 | +original idea: https://css-tricks.com/jquery-magicline-navigation/ |
| 3 | + |
| 4 | +[](https://www.codefactor.io/repository/github/basticodes/vanilla-js-magic-line-navigation) |
| 5 | +[](https://github.com/prettier/prettier) |
| 6 | + |
| 7 | +## Browser Support |
| 8 | + |  |  |  |  |  |
| 9 | +--- | --- | --- | --- | --- | --- | |
| 10 | +< 15 ✔ | 5+ ✔ | 10+ ✔ | < 15 ✔ | < 23 ✔ | 5.1+ ✔ | |
| 11 | + |
| 12 | +To get IE Support below Version 10 (or any other browser that does not support Element.Classlist) use a Classlist Polyfill. |
| 13 | + |
| 14 | +## Dependencies |
| 15 | +* None |
| 16 | + |
| 17 | +However you can implement every Animation Library like anime.js for the animations. |
| 18 | + |
| 19 | +## Filesize |
| 20 | +* Minified Version: |
| 21 | + * 2.58 KB (1.07 KB gzipped) |
| 22 | + |
| 23 | +* Non Minified Version |
| 24 | + * 7.49 KB (2.12 KB gzipped) |
| 25 | + |
| 26 | +## Usage |
| 27 | +```javascript |
| 28 | +var myMagicLine = new magicLine( |
| 29 | + document.querySelectorAll('.floating-line-menu'), |
| 30 | + { |
| 31 | + navElements: 'a', // navigation element selector |
| 32 | + mode: 'line', // line or pill |
| 33 | + lineStrength: 2, // Thickness of the line |
| 34 | + lineClass: 'magic-line', // Classname to add to the line element |
| 35 | + wrapper: 'div', // the node that's being created as an element wrapper |
| 36 | + animationCallback: function (el, params) { // might be either null or a callback function |
| 37 | + animationLibrary({ |
| 38 | + targets: el, |
| 39 | + left: params.left, |
| 40 | + top: params.top, |
| 41 | + width: params.width, |
| 42 | + height: params.height |
| 43 | + }); |
| 44 | + } |
| 45 | + } |
| 46 | +); |
| 47 | +myMagicLine.init(); |
| 48 | +``` |
| 49 | + |
| 50 | +## Options |
| 51 | +| Option | Value | Default | |
| 52 | +| ----------------- |---------------------------------------------------------------|-----------------| |
| 53 | +| navElements | a query Selector, you can even define multiple like 'a, span' | 'a' | |
| 54 | +| mode | might be either 'line' or 'pill' | 'line' | |
| 55 | +| lineStrength | thickness of your line in px | 2 | |
| 56 | +| lineClass | The classname of the floating-line element | 'magic-line' | |
| 57 | +| wrapper | DOMNode to be inserted as a wrapper | 'div' | |
| 58 | +| animationCallback | a callBack Function used for animation | null | |
| 59 | + |
| 60 | +## This is how it looks like |
| 61 | + |
| 62 | + |
| 63 | +Check out the [Demo](https://codepen.io/bastian_fiessinger/full/MWYMWJN) on Codepen |
0 commit comments