-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
224 lines (184 loc) · 8.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Priority Navigation</title>
<link rel="canonical" href="https://matthornsby.github.io/priority-navigation/" />
<meta name="description" content="Priority Navigation is a JQuery plugin for creating arbitrarily-prioritized responsive navigation menus">
<link rel="stylesheet" href="src/priority-navigation.css"><!-- default styling, required for functionality -->
<link rel="stylesheet" href="demo/demo-nav.css"><!-- styling for this demo only, including display:table overrides -->
<link rel="stylesheet" href="demo/demo-content.css"><!-- content styling, you don't need this -->
<<<<<<< HEAD
=======
<!-- this is form demo tracking, remove it for your implementation -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4314936-4', 'auto');
ga('send', 'pageview');
</script>
>>>>>>> gh-pages
</head>
<body>
<a href="#main" id="skipmain" class="hidden">Skip to content</a>
<header>
<a href="#" rel="me" id="logo" aria-label="Demo Logo - infinity symbol">∞</a>
<nav>
<ul class="toPrioritize">
<li data-priority="0">
<a href="#">Priority Navigation Demo</a>
</li>
<li data-priority="1">
<a href="#">Priority 1</a>
</li>
<li data-priority="2">
<a href="#">Priority 2</a>
</li>
<li data-priority="4">
<a href="#">Priority 4a</a>
</li>
<li data-priority="4">
<a href="#">Priority 4b</a>
</li>
<li data-priority="3">
<a href="#">Priority 3</a>
</li>
<li data-priority="5">
<a href="#">Priority 5</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<section>
<article>
<header>
<h1>Priority Navigation</h1>
<p>A JQuery plugin for creating arbitrarily-prioritized responsive navigation menus</p>
</header>
<p>
It’s become generally accepted that hiding menus by default, behind a hamburger icon for instance, can dampen discoverability and therefor engagement. <strong>Priority Navigation</strong> is a take on the <a href="https://css-tricks.com/the-priority-navigation-pattern/">Priority+ Navigation</a> pattern.
</p>
<blockquote cite="http://bradfrost.com/blog/post/revisiting-the-priority-pattern/">
<p>In his article <a href="http://www.lukew.com/ff/entry.asp?1945">Obvious Always Wins</a>, Luke Wroblewski warns of the dangers of sweeping links and actions under the rug. It’s challenging to find the room to expose important actions on constrained mobile screen sizes, but it’s necessary for designers to do so.</p>
<footer>
<a href="http://bradfrost.com/blog/post/revisiting-the-priority-pattern/">Revisiting the Priority+ Navigation Pattern</a>, <span class="nowrap">Brad Frost</span>
</footer>
</blockquote>
<p>
The main feature that sets <strong>Priority Navigation</strong> apart from other examples, is that it allows for prioritization ordering independent from menu ordering. Menu item prioritization is managed by applying data-attributes to the elements.
</p>
<p class="button-wrapper">
<a href="https://github.com/matthornsby/priority-navigation" class="github button">GitHub</a>
<a href="https://github.com/matthornsby/priority-navigation/archive/master.zip" class="download button">Download</a>
</p>
<h2>The HTML</h2>
<figure class="code">
<code>
<ul class="toPrioritize">
<li data-priority="0">
<a href="#">Priority Navigation Demo</a>
</li>
<li data-priority="1">
<a href="#">Priority 1</a>
</li>
<li data-priority="2">
<a href="#">Priority 2</a>
</li>
<li data-priority="4">
<a href="#">Priority 4a</a>
</li>
<li data-priority="4">
<a href="#">Priority 4b</a>
</li>
<li data-priority="3">
<a href="#">Priority 3</a>
</li>
<li data-priority="5">
<a href="#">Priority 5</a>
</li>
</ul>
</code>
<figcaption>
Here's the list from this page.
</figcaption>
</figure>
<p> Items are demoted (both hidden from view <em>and</em> given the class demoted) in descending order, starting with the highest data-priority value set, in this example "Priority 5" has a data-priority value of 5.</p>
<p>Items with the same data-priority value are demoted simultaneously, given you the option of connecting particular elements as sets, this this example "Priority 4a" and "Priority 4b" both have a data-priority value of 4.</p>
<p>You may optionally include elements with a data-priority value of 0. These items are hidden from closed view, even if the menu has not been truncated. The original intention of this feature was to allow the display of a link to the site homepage as part of an opened menu, as a supplement to a link provided elsewhere. In this example "Priority Navigation Demo" is only visible if the menu is opened, but is also accessible by clicking the <span class="nowrap">logo (<span class="inline-logo" aria-label="Demo Logo - infinity symbol">∞</span>).</span>
</p>
<h2>The CSS</h2>
<p>
Include <a href="src/priority-navigation.css">src/priority-navigation.css</a> or its content in your own stylesheet.
</p>
<p>
The default styling displays the menu items as <em>inline-block</em>, which lets you align it as normal text. However, this example includes <a href="demo/demo-nav.css">additional styling</a> to display the menu as a <em>table</em> which allows to fully-justify the menu.
</p>
<h2>The JavaScript</h2>
<p>
Include jQuery and <a href="src/priority-navigation.min.js">src/priority-navigation.min.js</a> or its content in your own javascript. <a href="src/priority-navigation.js">An un-minified version</a> is available for your review.
</p>
<figure class="code">
<code>
$(".toPrioritize").prioritize();
</code>
<figcaption>
That's pretty much it. Or, if you want to go a little further…
</figcaption>
</figure>
<figure class="code">
<code>
$(".toPrioritize").prioritize({
more: "More", //default: More…
less: "Less", //default: Less…
menu: "Navigation" //default: Menu
});
</code>
<figcaption>
There are a few available options if you want to override the default label text.
</figcaption>
</figure>
<p class="button-wrapper">
<a href="https://github.com/matthornsby/priority-navigation" class="github button">GitHub</a>
<a href="https://github.com/matthornsby/priority-navigation/archive/master.zip" class="download button">Download</a>
</p>
</section>
</main>
<footer>
<p>
Created by <a href="http://matthornsby.com">Matt Hornsby</a>, <span class="nowrap">originally for <a href="http://mycollegeadvocate.com">My College Advocate</a>.</span>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="src/jquery-1.11.3.min.js"><\/script>')</script>
<script src="src/priority-navigation.min.js"></script>
<script>
$(function() {
$(".toPrioritize").prioritize({
more: "More",
less: "Less"
});
});
</script>
<!-- this is form demo tracking, remove it for your implementation -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4314936-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>