priority-nav 1.0.12 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -22
- package/README.md +106 -96
- package/demo/css/main.css +155 -155
- package/demo/css/priority-nav-core.css +38 -38
- package/demo/images/src/svg/arrow-down.svg +11 -11
- package/demo/images/src/svg/github-mark.svg +11 -11
- package/demo/images/src/svg/knob.svg +19 -19
- package/demo/index.html +143 -143
- package/demo/js/classList.js +69 -69
- package/demo/js/html5shiv.min.js +3 -3
- package/demo/js/priority-nav.js +666 -666
- package/demo/scss/base/_base.scss +13 -13
- package/demo/scss/base/_boxsizing.scss +13 -13
- package/demo/scss/base/_typography.scss +37 -37
- package/demo/scss/components/_github-links.scss +11 -11
- package/demo/scss/components/_logo.scss +14 -14
- package/demo/scss/components/_nav.scss +118 -118
- package/demo/scss/components/_social.scss +8 -8
- package/demo/scss/layouts/_header.scss +20 -20
- package/demo/scss/main.scss +42 -42
- package/demo/scss/pages/_home.scss +29 -29
- package/demo/scss/utils/_easings.scss +38 -38
- package/demo/scss/utils/_helpers.scss +92 -92
- package/demo/scss/utils/_triangles.scss +26 -26
- package/demo/scss/utils/_variables.scss +29 -29
- package/demo/scss/vendors/_normalize.scss +424 -424
- package/dist/priority-nav-core.css +9 -9
- package/dist/priority-nav.js +719 -724
- package/dist/priority-nav.min.js +3 -2
- package/package.json +46 -46
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24" height="25" viewBox="0 0 24 25">
|
|
2
|
-
<defs>
|
|
3
|
-
<style>
|
|
4
|
-
|
|
5
|
-
.cls-2 {
|
|
6
|
-
fill: #171717;
|
|
7
|
-
}
|
|
8
|
-
</style>
|
|
9
|
-
</defs>
|
|
10
|
-
<path d="M11.998,0.001 C5.370,0.001 -0.004,5.518 -0.004,12.326 C-0.004,17.770 3.435,22.389 8.205,24.019 C8.805,24.132 9.024,23.751 9.024,23.425 C9.024,23.132 9.013,22.357 9.008,21.329 C5.669,22.074 4.964,19.677 4.964,19.677 C4.419,18.253 3.632,17.874 3.632,17.874 C2.542,17.109 3.714,17.125 3.714,17.125 C4.919,17.212 5.553,18.395 5.553,18.395 C6.623,20.278 8.362,19.734 9.046,19.419 C9.155,18.623 9.465,18.080 9.808,17.771 C7.143,17.460 4.341,16.403 4.341,11.681 C4.341,10.335 4.808,9.235 5.576,8.374 C5.453,8.062 5.041,6.809 5.694,5.112 C5.694,5.112 6.701,4.781 8.994,6.375 C9.952,6.102 10.978,5.965 11.999,5.961 C13.018,5.965 14.045,6.102 15.004,6.375 C17.295,4.781 18.301,5.112 18.301,5.112 C18.956,6.809 18.544,8.062 18.421,8.374 C19.190,9.235 19.655,10.335 19.655,11.681 C19.655,16.415 16.848,17.457 14.174,17.762 C14.605,18.142 14.989,18.894 14.989,20.044 C14.989,21.692 14.975,23.021 14.975,23.425 C14.975,23.754 15.191,24.138 15.800,24.018 C20.565,22.385 24.001,17.769 24.001,12.326 C24.001,5.518 18.627,0.001 11.998,0.001 Z" id="path-1" class="cls-2" fill-rule="evenodd"/>
|
|
11
|
-
</svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24" height="25" viewBox="0 0 24 25">
|
|
2
|
+
<defs>
|
|
3
|
+
<style>
|
|
4
|
+
|
|
5
|
+
.cls-2 {
|
|
6
|
+
fill: #171717;
|
|
7
|
+
}
|
|
8
|
+
</style>
|
|
9
|
+
</defs>
|
|
10
|
+
<path d="M11.998,0.001 C5.370,0.001 -0.004,5.518 -0.004,12.326 C-0.004,17.770 3.435,22.389 8.205,24.019 C8.805,24.132 9.024,23.751 9.024,23.425 C9.024,23.132 9.013,22.357 9.008,21.329 C5.669,22.074 4.964,19.677 4.964,19.677 C4.419,18.253 3.632,17.874 3.632,17.874 C2.542,17.109 3.714,17.125 3.714,17.125 C4.919,17.212 5.553,18.395 5.553,18.395 C6.623,20.278 8.362,19.734 9.046,19.419 C9.155,18.623 9.465,18.080 9.808,17.771 C7.143,17.460 4.341,16.403 4.341,11.681 C4.341,10.335 4.808,9.235 5.576,8.374 C5.453,8.062 5.041,6.809 5.694,5.112 C5.694,5.112 6.701,4.781 8.994,6.375 C9.952,6.102 10.978,5.965 11.999,5.961 C13.018,5.965 14.045,6.102 15.004,6.375 C17.295,4.781 18.301,5.112 18.301,5.112 C18.956,6.809 18.544,8.062 18.421,8.374 C19.190,9.235 19.655,10.335 19.655,11.681 C19.655,16.415 16.848,17.457 14.174,17.762 C14.605,18.142 14.989,18.894 14.989,20.044 C14.989,21.692 14.975,23.021 14.975,23.425 C14.975,23.754 15.191,24.138 15.800,24.018 C20.565,22.385 24.001,17.769 24.001,12.326 C24.001,5.518 18.627,0.001 11.998,0.001 Z" id="path-1" class="cls-2" fill-rule="evenodd"/>
|
|
11
|
+
</svg>
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="16" height="31" viewBox="0 0 16 31">
|
|
2
|
-
<defs>
|
|
3
|
-
<style>
|
|
4
|
-
|
|
5
|
-
.cls-3 {
|
|
6
|
-
fill: #068df6;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.cls-4 {
|
|
10
|
-
fill: #ffffff;
|
|
11
|
-
}
|
|
12
|
-
</style>
|
|
13
|
-
</defs>
|
|
14
|
-
<g id="knobsvg">
|
|
15
|
-
<rect id="rect-1" class="cls-3" width="16" height="31"/>
|
|
16
|
-
<rect id="rect-2" class="cls-4" x="6" y="9" width="1" height="13"/>
|
|
17
|
-
<rect id="rect-3" class="cls-4" x="9" y="9" width="1" height="13"/>
|
|
18
|
-
</g>
|
|
19
|
-
</svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="16" height="31" viewBox="0 0 16 31">
|
|
2
|
+
<defs>
|
|
3
|
+
<style>
|
|
4
|
+
|
|
5
|
+
.cls-3 {
|
|
6
|
+
fill: #068df6;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.cls-4 {
|
|
10
|
+
fill: #ffffff;
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
</defs>
|
|
14
|
+
<g id="knobsvg">
|
|
15
|
+
<rect id="rect-1" class="cls-3" width="16" height="31"/>
|
|
16
|
+
<rect id="rect-2" class="cls-4" x="6" y="9" width="1" height="13"/>
|
|
17
|
+
<rect id="rect-3" class="cls-4" x="9" y="9" width="1" height="13"/>
|
|
18
|
+
</g>
|
|
19
|
+
</svg>
|
package/demo/index.html
CHANGED
|
@@ -1,143 +1,143 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
6
|
-
<title>PriorityNav.js</title>
|
|
7
|
-
<meta name="description" content="">
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
-
|
|
10
|
-
<!-- Place favicon.ico in the root directory -->
|
|
11
|
-
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
|
12
|
-
|
|
13
|
-
<!-- Google fonts -->
|
|
14
|
-
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
|
|
15
|
-
|
|
16
|
-
<!-- stylesheets -->
|
|
17
|
-
<link rel="stylesheet" href="../dist/priority-nav-core.css">
|
|
18
|
-
<link rel="stylesheet" href="css/main.css">
|
|
19
|
-
</head>
|
|
20
|
-
<body>
|
|
21
|
-
<!--[if lt IE 8]>
|
|
22
|
-
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
23
|
-
<![endif]-->
|
|
24
|
-
|
|
25
|
-
<div class="bg">
|
|
26
|
-
<header class="wrapper">
|
|
27
|
-
<h1>PriorityNav.js</h1>
|
|
28
|
-
<a class="github" href="https://github.com/gijsroge/priority-navigation">
|
|
29
|
-
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="24" height="25"
|
|
30
|
-
viewBox="0 0 24 25">
|
|
31
|
-
<defs>
|
|
32
|
-
<style>.cls-2 {
|
|
33
|
-
fill: #171717;
|
|
34
|
-
}</style>
|
|
35
|
-
</defs>
|
|
36
|
-
<path d="M11.998 0C5.37 0-.004 5.52-.004 12.327c0 5.444 3.44 10.063 8.21 11.693.6.112.818-.27.818-.595 0-.293-.01-1.068-.016-2.096-3.34.744-4.044-1.653-4.044-1.653-.545-1.424-1.332-1.803-1.332-1.803-1.09-.765.082-.75.082-.75 1.205.088 1.84 1.27 1.84 1.27 1.07 1.884 2.808 1.34 3.492 1.025.11-.797.42-1.34.762-1.65-2.665-.31-5.467-1.367-5.467-6.09 0-1.345.468-2.445 1.236-3.306-.123-.312-.535-1.565.118-3.262 0 0 1.007-.33 3.3 1.263.958-.273 1.984-.41 3.005-.414 1.018.005 2.045.142 3.004.415C17.294 4.78 18.3 5.112 18.3 5.112c.656 1.697.244 2.95.12 3.262.77.86 1.235 1.96 1.235 3.307 0 4.735-2.807 5.777-5.48 6.082.43.38.814 1.132.814 2.282 0 1.648-.015 2.977-.015 3.38 0 .33.216.714.825.594 4.765-1.633 8.2-6.25 8.2-11.692C24 5.518 18.628 0 12 0z"
|
|
37
|
-
id="path-1" class="cls-2" fill-rule="evenodd"/>
|
|
38
|
-
</svg>
|
|
39
|
-
download on GitHub</a>
|
|
40
|
-
</header>
|
|
41
|
-
|
|
42
|
-
<section class="wrapper">
|
|
43
|
-
<p class="heading">
|
|
44
|
-
PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don't fit its parent.
|
|
45
|
-
</p>
|
|
46
|
-
|
|
47
|
-
<div class="social">
|
|
48
|
-
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://gijsroge.github.io/priority-nav.js/" data-text="PriorityNav.js. A lightweight dependency free javascript plugin for smart responsive navigations." data-via="GijsRoge">Tweet</a>
|
|
49
|
-
<script>!function (d, s, id) {
|
|
50
|
-
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
|
|
51
|
-
if (!d.getElementById(id)) {
|
|
52
|
-
js = d.createElement(s);
|
|
53
|
-
js.id = id;
|
|
54
|
-
js.src = p + '://platform.twitter.com/widgets.js';
|
|
55
|
-
fjs.parentNode.insertBefore(js, fjs);
|
|
56
|
-
}
|
|
57
|
-
}(document, 'script', 'twitter-wjs');</script>
|
|
58
|
-
<a class="github-button" href="https://github.com/gijsroge/priority-navigation" data-count-href="/gijsroge/priority-navigation/stargazers" data-count-api="/repos/gijsroge/priority-navigation#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star gijsroge/priority-navigation on GitHub">Star</a>
|
|
59
|
-
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
|
60
|
-
</div>
|
|
61
|
-
</section>
|
|
62
|
-
|
|
63
|
-
<div class="wrapper--big">
|
|
64
|
-
<nav class="nav">
|
|
65
|
-
<div class="wrapper resize-drag nav-wrapper">
|
|
66
|
-
<ul class="nav-ul">
|
|
67
|
-
<li><a href="#">menu item</a></li>
|
|
68
|
-
<li><a href="#">menu item</a></li>
|
|
69
|
-
<li><a href="#">menu item</a></li>
|
|
70
|
-
<li><a href="#">menu item</a></li>
|
|
71
|
-
<li><a href="#">menu item</a></li>
|
|
72
|
-
</ul>
|
|
73
|
-
</div>
|
|
74
|
-
</nav>
|
|
75
|
-
</div>
|
|
76
|
-
|
|
77
|
-
<nav class="nav">
|
|
78
|
-
<div class="wrapper resize-drag topnav-wrapper">
|
|
79
|
-
<ul class="nav-ul">
|
|
80
|
-
<li><a href="#">menu item</a></li>
|
|
81
|
-
<li><a href="#">menu item</a></li>
|
|
82
|
-
<li><a href="#">menu item</a></li>
|
|
83
|
-
<li><a href="#">menu item</a></li>
|
|
84
|
-
<li><a href="#">menu item</a></li>
|
|
85
|
-
</ul>
|
|
86
|
-
</div>
|
|
87
|
-
</nav>
|
|
88
|
-
|
|
89
|
-
<section class="wrapper bottom">
|
|
90
|
-
<p>
|
|
91
|
-
<strong>
|
|
92
|
-
PriorityNav is developed by <a href="http://www.twitter.com/gijsroge">@gijsroge</a> & weighs
|
|
93
|
-
around 5kb
|
|
94
|
-
& 2kb gzipped. The idea behind this plugin is based around the priority+ navigation from
|
|
95
|
-
<a href="http://bradfrost.com/blog/post/revisiting-the-priority-pattern/">Brad Frost</a>.
|
|
96
|
-
</strong>
|
|
97
|
-
</p>
|
|
98
|
-
|
|
99
|
-
<p>
|
|
100
|
-
PriorityNav is licensed under the MIT license which basically means you can do whatever you want as
|
|
101
|
-
long
|
|
102
|
-
as you include the original copyright and license notice in any copy of the software/source.
|
|
103
|
-
</p>
|
|
104
|
-
|
|
105
|
-
<h4></h4>
|
|
106
|
-
|
|
107
|
-
<p>
|
|
108
|
-
<b>Browsers support:</b><br/> ie9+ (if you include <a href="https://github.com/remy/polyfills">classList.js</a>), Chrome, Firefox, Safari, Opera. (mobile & desktop)
|
|
109
|
-
</p>
|
|
110
|
-
</section>
|
|
111
|
-
</div>
|
|
112
|
-
|
|
113
|
-
<!--[if lte IE 9]>
|
|
114
|
-
<script src="js/classList.js"></script>
|
|
115
|
-
<script src="js/html5shiv.min.js"></script>
|
|
116
|
-
<![endif]-->
|
|
117
|
-
<script src="../src/priority-nav.js"></script>
|
|
118
|
-
|
|
119
|
-
<script>
|
|
120
|
-
/**
|
|
121
|
-
* Initiate priorityNav
|
|
122
|
-
*/
|
|
123
|
-
var wrapper = document.querySelector(".nav-wrapper");
|
|
124
|
-
var nav = priorityNav.init({
|
|
125
|
-
mainNavWrapper: ".nav-wrapper", // mainnav wrapper selector (must be direct parent from mainNav)
|
|
126
|
-
mainNav: ".nav-ul", // mainnav selector. (must be inline-block)
|
|
127
|
-
navDropdownLabel: 'test',
|
|
128
|
-
navDropdownClassName: "nav__dropdown", // class used for the dropdown.
|
|
129
|
-
navDropdownToggleClassName: "nav__dropdown-toggle", // class used for the dropdown toggle.
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
var nav2 = priorityNav.init({
|
|
133
|
-
mainNavWrapper: ".topnav-wrapper", // mainnav wrapper selector (must be direct parent from mainNav)
|
|
134
|
-
mainNav: ".nav-ul", // mainnav selector. (must be inline-block)
|
|
135
|
-
navDropdownLabel: 'test2',
|
|
136
|
-
navDropdownClassName: "nav__dropdown", // class used for the dropdown.
|
|
137
|
-
navDropdownToggleClassName: "nav__dropdown-toggle", // class used for the dropdown toggle.
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
</script>
|
|
141
|
-
|
|
142
|
-
</body>
|
|
143
|
-
</html>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
6
|
+
<title>PriorityNav.js</title>
|
|
7
|
+
<meta name="description" content="">
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
+
|
|
10
|
+
<!-- Place favicon.ico in the root directory -->
|
|
11
|
+
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
|
12
|
+
|
|
13
|
+
<!-- Google fonts -->
|
|
14
|
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
|
|
15
|
+
|
|
16
|
+
<!-- stylesheets -->
|
|
17
|
+
<link rel="stylesheet" href="../dist/priority-nav-core.css">
|
|
18
|
+
<link rel="stylesheet" href="css/main.css">
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<!--[if lt IE 8]>
|
|
22
|
+
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
23
|
+
<![endif]-->
|
|
24
|
+
|
|
25
|
+
<div class="bg">
|
|
26
|
+
<header class="wrapper">
|
|
27
|
+
<h1>PriorityNav.js</h1>
|
|
28
|
+
<a class="github" href="https://github.com/gijsroge/priority-navigation">
|
|
29
|
+
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="24" height="25"
|
|
30
|
+
viewBox="0 0 24 25">
|
|
31
|
+
<defs>
|
|
32
|
+
<style>.cls-2 {
|
|
33
|
+
fill: #171717;
|
|
34
|
+
}</style>
|
|
35
|
+
</defs>
|
|
36
|
+
<path d="M11.998 0C5.37 0-.004 5.52-.004 12.327c0 5.444 3.44 10.063 8.21 11.693.6.112.818-.27.818-.595 0-.293-.01-1.068-.016-2.096-3.34.744-4.044-1.653-4.044-1.653-.545-1.424-1.332-1.803-1.332-1.803-1.09-.765.082-.75.082-.75 1.205.088 1.84 1.27 1.84 1.27 1.07 1.884 2.808 1.34 3.492 1.025.11-.797.42-1.34.762-1.65-2.665-.31-5.467-1.367-5.467-6.09 0-1.345.468-2.445 1.236-3.306-.123-.312-.535-1.565.118-3.262 0 0 1.007-.33 3.3 1.263.958-.273 1.984-.41 3.005-.414 1.018.005 2.045.142 3.004.415C17.294 4.78 18.3 5.112 18.3 5.112c.656 1.697.244 2.95.12 3.262.77.86 1.235 1.96 1.235 3.307 0 4.735-2.807 5.777-5.48 6.082.43.38.814 1.132.814 2.282 0 1.648-.015 2.977-.015 3.38 0 .33.216.714.825.594 4.765-1.633 8.2-6.25 8.2-11.692C24 5.518 18.628 0 12 0z"
|
|
37
|
+
id="path-1" class="cls-2" fill-rule="evenodd"/>
|
|
38
|
+
</svg>
|
|
39
|
+
download on GitHub</a>
|
|
40
|
+
</header>
|
|
41
|
+
|
|
42
|
+
<section class="wrapper">
|
|
43
|
+
<p class="heading">
|
|
44
|
+
PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don't fit its parent.
|
|
45
|
+
</p>
|
|
46
|
+
|
|
47
|
+
<div class="social">
|
|
48
|
+
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://gijsroge.github.io/priority-nav.js/" data-text="PriorityNav.js. A lightweight dependency free javascript plugin for smart responsive navigations." data-via="GijsRoge">Tweet</a>
|
|
49
|
+
<script>!function (d, s, id) {
|
|
50
|
+
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
|
|
51
|
+
if (!d.getElementById(id)) {
|
|
52
|
+
js = d.createElement(s);
|
|
53
|
+
js.id = id;
|
|
54
|
+
js.src = p + '://platform.twitter.com/widgets.js';
|
|
55
|
+
fjs.parentNode.insertBefore(js, fjs);
|
|
56
|
+
}
|
|
57
|
+
}(document, 'script', 'twitter-wjs');</script>
|
|
58
|
+
<a class="github-button" href="https://github.com/gijsroge/priority-navigation" data-count-href="/gijsroge/priority-navigation/stargazers" data-count-api="/repos/gijsroge/priority-navigation#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star gijsroge/priority-navigation on GitHub">Star</a>
|
|
59
|
+
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
|
60
|
+
</div>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<div class="wrapper--big">
|
|
64
|
+
<nav class="nav">
|
|
65
|
+
<div class="wrapper resize-drag nav-wrapper">
|
|
66
|
+
<ul class="nav-ul">
|
|
67
|
+
<li><a href="#">menu item</a></li>
|
|
68
|
+
<li><a href="#">menu item</a></li>
|
|
69
|
+
<li><a href="#">menu item</a></li>
|
|
70
|
+
<li><a href="#">menu item</a></li>
|
|
71
|
+
<li><a href="#">menu item</a></li>
|
|
72
|
+
</ul>
|
|
73
|
+
</div>
|
|
74
|
+
</nav>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<nav class="nav">
|
|
78
|
+
<div class="wrapper resize-drag topnav-wrapper">
|
|
79
|
+
<ul class="nav-ul">
|
|
80
|
+
<li><a href="#">menu item</a></li>
|
|
81
|
+
<li><a href="#">menu item</a></li>
|
|
82
|
+
<li><a href="#">menu item</a></li>
|
|
83
|
+
<li><a href="#">menu item</a></li>
|
|
84
|
+
<li><a href="#">menu item</a></li>
|
|
85
|
+
</ul>
|
|
86
|
+
</div>
|
|
87
|
+
</nav>
|
|
88
|
+
|
|
89
|
+
<section class="wrapper bottom">
|
|
90
|
+
<p>
|
|
91
|
+
<strong>
|
|
92
|
+
PriorityNav is developed by <a href="http://www.twitter.com/gijsroge">@gijsroge</a> & weighs
|
|
93
|
+
around 5kb
|
|
94
|
+
& 2kb gzipped. The idea behind this plugin is based around the priority+ navigation from
|
|
95
|
+
<a href="http://bradfrost.com/blog/post/revisiting-the-priority-pattern/">Brad Frost</a>.
|
|
96
|
+
</strong>
|
|
97
|
+
</p>
|
|
98
|
+
|
|
99
|
+
<p>
|
|
100
|
+
PriorityNav is licensed under the MIT license which basically means you can do whatever you want as
|
|
101
|
+
long
|
|
102
|
+
as you include the original copyright and license notice in any copy of the software/source.
|
|
103
|
+
</p>
|
|
104
|
+
|
|
105
|
+
<h4></h4>
|
|
106
|
+
|
|
107
|
+
<p>
|
|
108
|
+
<b>Browsers support:</b><br/> ie9+ (if you include <a href="https://github.com/remy/polyfills">classList.js</a>), Chrome, Firefox, Safari, Opera. (mobile & desktop)
|
|
109
|
+
</p>
|
|
110
|
+
</section>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<!--[if lte IE 9]>
|
|
114
|
+
<script src="js/classList.js"></script>
|
|
115
|
+
<script src="js/html5shiv.min.js"></script>
|
|
116
|
+
<![endif]-->
|
|
117
|
+
<script src="../src/priority-nav.js"></script>
|
|
118
|
+
|
|
119
|
+
<script>
|
|
120
|
+
/**
|
|
121
|
+
* Initiate priorityNav
|
|
122
|
+
*/
|
|
123
|
+
var wrapper = document.querySelector(".nav-wrapper");
|
|
124
|
+
var nav = priorityNav.init({
|
|
125
|
+
mainNavWrapper: ".nav-wrapper", // mainnav wrapper selector (must be direct parent from mainNav)
|
|
126
|
+
mainNav: ".nav-ul", // mainnav selector. (must be inline-block)
|
|
127
|
+
navDropdownLabel: 'test',
|
|
128
|
+
navDropdownClassName: "nav__dropdown", // class used for the dropdown.
|
|
129
|
+
navDropdownToggleClassName: "nav__dropdown-toggle", // class used for the dropdown toggle.
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
var nav2 = priorityNav.init({
|
|
133
|
+
mainNavWrapper: ".topnav-wrapper", // mainnav wrapper selector (must be direct parent from mainNav)
|
|
134
|
+
mainNav: ".nav-ul", // mainnav selector. (must be inline-block)
|
|
135
|
+
navDropdownLabel: 'test2',
|
|
136
|
+
navDropdownClassName: "nav__dropdown", // class used for the dropdown.
|
|
137
|
+
navDropdownToggleClassName: "nav__dropdown-toggle", // class used for the dropdown toggle.
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
</script>
|
|
141
|
+
|
|
142
|
+
</body>
|
|
143
|
+
</html>
|
package/demo/js/classList.js
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
(function () {
|
|
2
|
-
|
|
3
|
-
if (typeof window.Element === "undefined" || "classList" in document.documentElement) return;
|
|
4
|
-
|
|
5
|
-
var prototype = Array.prototype,
|
|
6
|
-
push = prototype.push,
|
|
7
|
-
splice = prototype.splice,
|
|
8
|
-
join = prototype.join;
|
|
9
|
-
|
|
10
|
-
function DOMTokenList(el) {
|
|
11
|
-
this.el = el;
|
|
12
|
-
// The className needs to be trimmed and split on whitespace
|
|
13
|
-
// to retrieve a list of classes.
|
|
14
|
-
var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/);
|
|
15
|
-
for (var i = 0; i < classes.length; i++) {
|
|
16
|
-
push.call(this, classes[i]);
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
DOMTokenList.prototype = {
|
|
21
|
-
add: function(token) {
|
|
22
|
-
if(this.contains(token)) return;
|
|
23
|
-
push.call(this, token);
|
|
24
|
-
this.el.className = this.toString();
|
|
25
|
-
},
|
|
26
|
-
contains: function(token) {
|
|
27
|
-
return this.el.className.indexOf(token) != -1;
|
|
28
|
-
},
|
|
29
|
-
item: function(index) {
|
|
30
|
-
return this[index] || null;
|
|
31
|
-
},
|
|
32
|
-
remove: function(token) {
|
|
33
|
-
if (!this.contains(token)) return;
|
|
34
|
-
for (var i = 0; i < this.length; i++) {
|
|
35
|
-
if (this[i] == token) break;
|
|
36
|
-
}
|
|
37
|
-
splice.call(this, i, 1);
|
|
38
|
-
this.el.className = this.toString();
|
|
39
|
-
},
|
|
40
|
-
toString: function() {
|
|
41
|
-
return join.call(this, ' ');
|
|
42
|
-
},
|
|
43
|
-
toggle: function(token) {
|
|
44
|
-
if (!this.contains(token)) {
|
|
45
|
-
this.add(token);
|
|
46
|
-
} else {
|
|
47
|
-
this.remove(token);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
return this.contains(token);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
window.DOMTokenList = DOMTokenList;
|
|
55
|
-
|
|
56
|
-
function defineElementGetter (obj, prop, getter) {
|
|
57
|
-
if (Object.defineProperty) {
|
|
58
|
-
Object.defineProperty(obj, prop,{
|
|
59
|
-
get : getter
|
|
60
|
-
});
|
|
61
|
-
} else {
|
|
62
|
-
obj.__defineGetter__(prop, getter);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
defineElementGetter(Element.prototype, 'classList', function () {
|
|
67
|
-
return new DOMTokenList(this);
|
|
68
|
-
});
|
|
69
|
-
|
|
1
|
+
(function () {
|
|
2
|
+
|
|
3
|
+
if (typeof window.Element === "undefined" || "classList" in document.documentElement) return;
|
|
4
|
+
|
|
5
|
+
var prototype = Array.prototype,
|
|
6
|
+
push = prototype.push,
|
|
7
|
+
splice = prototype.splice,
|
|
8
|
+
join = prototype.join;
|
|
9
|
+
|
|
10
|
+
function DOMTokenList(el) {
|
|
11
|
+
this.el = el;
|
|
12
|
+
// The className needs to be trimmed and split on whitespace
|
|
13
|
+
// to retrieve a list of classes.
|
|
14
|
+
var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/);
|
|
15
|
+
for (var i = 0; i < classes.length; i++) {
|
|
16
|
+
push.call(this, classes[i]);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
DOMTokenList.prototype = {
|
|
21
|
+
add: function(token) {
|
|
22
|
+
if(this.contains(token)) return;
|
|
23
|
+
push.call(this, token);
|
|
24
|
+
this.el.className = this.toString();
|
|
25
|
+
},
|
|
26
|
+
contains: function(token) {
|
|
27
|
+
return this.el.className.indexOf(token) != -1;
|
|
28
|
+
},
|
|
29
|
+
item: function(index) {
|
|
30
|
+
return this[index] || null;
|
|
31
|
+
},
|
|
32
|
+
remove: function(token) {
|
|
33
|
+
if (!this.contains(token)) return;
|
|
34
|
+
for (var i = 0; i < this.length; i++) {
|
|
35
|
+
if (this[i] == token) break;
|
|
36
|
+
}
|
|
37
|
+
splice.call(this, i, 1);
|
|
38
|
+
this.el.className = this.toString();
|
|
39
|
+
},
|
|
40
|
+
toString: function() {
|
|
41
|
+
return join.call(this, ' ');
|
|
42
|
+
},
|
|
43
|
+
toggle: function(token) {
|
|
44
|
+
if (!this.contains(token)) {
|
|
45
|
+
this.add(token);
|
|
46
|
+
} else {
|
|
47
|
+
this.remove(token);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return this.contains(token);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
window.DOMTokenList = DOMTokenList;
|
|
55
|
+
|
|
56
|
+
function defineElementGetter (obj, prop, getter) {
|
|
57
|
+
if (Object.defineProperty) {
|
|
58
|
+
Object.defineProperty(obj, prop,{
|
|
59
|
+
get : getter
|
|
60
|
+
});
|
|
61
|
+
} else {
|
|
62
|
+
obj.__defineGetter__(prop, getter);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
defineElementGetter(Element.prototype, 'classList', function () {
|
|
67
|
+
return new DOMTokenList(this);
|
|
68
|
+
});
|
|
69
|
+
|
|
70
70
|
})();
|
package/demo/js/html5shiv.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @preserve HTML5 Shiv 3.7.3-pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
|
3
|
-
*/
|
|
1
|
+
/**
|
|
2
|
+
* @preserve HTML5 Shiv 3.7.3-pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
|
3
|
+
*/
|
|
4
4
|
!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.3-pre",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b),"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:this,document);
|