-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
251 lines (240 loc) · 12.3 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Canonical global navigation demo</title>
<meta name="description" content="Canonical global navigation demo" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-4.9.0.min.css" />
<style type="text/css">
body {
display: block;
height: 100%;
margin: 0;
width: 100%;
}
</style>
</head>
<body>
<header id="navigation" class="p-navigation is-dark">
<div class="p-navigation__row">
<div class="p-navigation__banner">
<div class="p-navigation__logo">
<a class="p-navigation__item" href="#">
<img class="p-navigation__image" src="https://assets.ubuntu.com/v1/3c7954dd-logo-canonical-white.svg" alt="Canonical" width="95">
</a>
</div>
<a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
<a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
</div>
<nav class="p-navigation__nav" aria-label="Example main navigation">
<ul class="p-navigation__items">
<li class="p-navigation__item is-selected">
<a class="p-navigation__link" href="#">Partners</a>
</li>
<li class="p-navigation__item">
<a class="p-navigation__link" href="#">Services</a>
</li>
<li class="p-navigation__item--dropdown-toggle" id="link-3">
<button href="#link-3-menu" aria-controls="link-3-menu" class="p-navigation__link">LXCFS</button>
<ul class="p-navigation__dropdown" id="link-3-menu" aria-hidden="false">
<li>
<a href="#" class="p-navigation__dropdown-item">Introduction</a>
</li>
<li>
<a href="#" class="p-navigation__dropdown-item">News</a>
</li>
<li>
<a href="#" class="p-navigation__dropdown-item">Getting started</a>
</li>
</ul>
</li>
</ul>
<ul class="p-navigation__items global-nav">
<li class="p-navigation__item">
<a class="p-navigation__link" href="#">Sign in</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main-content">
<div class="u-fixed-width">
<h1>Page content</h1>
<button>Focus test</button>
<p>
This is the demo of the global navigation project for Canonical's
websites.
</p>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mi
justo. Mauris nisi neque, posuere sed consequat vel, aliquet id nulla.
Aliquam nec velit elit. Nam eu sapien nisl. Morbi mattis viverra leo a
lobortis. Aenean at nisl lobortis, tristique odio ac, porta massa.
Curabitur vehicula malesuada turpis in varius. Pellentesque leo neque,
vehicula sed porttitor eu, hendrerit vel lacus. Suspendisse suscipit
ultricies erat id facilisis. Ut hendrerit vitae ex nec convallis.
</p>
<p>
Nunc scelerisque, mi vitae fringilla euismod, arcu nisl dignissim
neque, nec accumsan ante risus ut ipsum. Pellentesque vulputate odio
turpis. Nunc sed semper dui, ut tempor nulla. Nullam consectetur
fermentum ligula eu eleifend. Morbi ullamcorper gravida mauris. Cras
sed massa eu ante convallis pulvinar. Pellentesque interdum
sollicitudin elit, et efficitur purus varius vitae. Morbi euismod
faucibus sapien id laoreet. Quisque euismod est bibendum lorem
ultricies, nec facilisis nibh lobortis. Fusce in tempor justo, ut
mollis orci. Sed sem purus, tristique a magna sit amet, sollicitudin
lobortis ipsum. Proin mauris eros, pretium at magna ac, rhoncus
tristique nulla.
</p>
<p>
Nullam blandit purus et nulla vehicula, sit amet convallis erat
ullamcorper. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Vestibulum dignissim placerat velit in
mollis. Quisque sed magna nisi. Praesent varius congue felis sit amet
scelerisque. Phasellus purus lorem, porta sit amet eleifend et,
dapibus imperdiet erat. Nunc dictum nibh quis convallis imperdiet.
Praesent ut diam eget eros auctor sollicitudin nec id urna. In ante
nisl, facilisis vitae mauris in, faucibus fringilla justo. Nunc
rhoncus purus et tellus imperdiet finibus.
</p>
<p>
Quisque ullamcorper eros mauris, non eleifend leo sagittis nec. Aenean
ut ex id lorem sagittis dapibus. Pellentesque consequat sapien erat,
quis cursus augue ultrices in. Mauris nec venenatis nisi. Integer
gravida semper elit sagittis finibus. Vestibulum convallis odio et leo
imperdiet, non molestie eros posuere. Quisque egestas nulla a libero
pretium, nec pulvinar mauris vestibulum. Pellentesque vehicula dolor
nulla, eu feugiat dolor tempor congue. Duis id tincidunt quam. In hac
habitasse platea dictumst. Mauris tempus tortor eget sapien ultrices
egestas. Nulla facilisi. Nulla hendrerit quis ante a viverra. Maecenas
eu egestas libero.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna.
Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius
fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse
porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo
nec sodales tempus. Nunc porttitor et libero in dignissim. Proin
euismod eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis
diam, vitae sollicitudin ligula suscipit vel. Suspendisse et justo
sapien. Etiam eleifend mauris non orci fringilla vulputate. Ut
imperdiet magna faucibus, sagittis ex eu, sagittis tellus. Vestibulum
faucibus vestibulum arcu non dictum. Nullam quis volutpat arcu, sit
amet viverra ante.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna.
Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius
fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse
porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo
nec sodales tempus. Nunc porttitor et libero in dignissim. Proin
euismod eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis
diam, vitae sollicitudin ligula suscipit vel. Suspendisse et justo
sapien. Etiam eleifend mauris non orci fringilla vulputate. Ut
imperdiet magna faucibus, sagittis ex eu, sagittis tellus. Vestibulum
faucibus vestibulum arcu non dictum. Nullam quis volutpat arcu, sit
amet viverra ante.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna.
Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius
fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse
porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo
nec sodales tempus. Nunc porttitor et libero in dignissim. Proin
euismod eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis
diam, vitae sollicitudin ligula suscipit vel. Suspendisse et justo
sapien. Etiam eleifend mauris non orci fringilla vulputate. Ut
imperdiet magna faucibus, sagittis ex eu, sagittis tellus. Vestibulum
faucibus vestibulum arcu non dictum. Nullam quis volutpat arcu, sit
amet viverra ante.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna.
Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius
fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse
porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo
nec sodales tempus. Nunc porttitor et libero in dignissim. Proin
euismod eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis
diam, vitae sollicitudin ligula suscipit vel. Suspendisse et justo
sapien. Etiam eleifend mauris non orci fringilla vulputate. Ut
imperdiet magna faucibus, sagittis ex eu, sagittis tellus. Vestibulum
faucibus vestibulum arcu non dictum. Nullam quis volutpat arcu, sit
amet viverra ante.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna.
Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius
fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse
porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo
nec sodales tempus. Nunc porttitor et libero in dignissim. Proin
euismod eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis
diam, vitae sollicitudin ligula suscipit vel. Suspendisse et justo
sapien. Etiam eleifend mauris non orci fringilla vulputate. Ut
imperdiet magna faucibus, sagittis ex eu, sagittis tellus. Vestibulum
faucibus vestibulum arcu non dictum. Nullam quis volutpat arcu, sit
amet viverra ante.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna.
Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius
fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse
porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo
nec sodales tempus. Nunc porttitor et libero in dignissim. Proin
euismod eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis
diam, vitae sollicitudin ligula suscipit vel. Suspendisse et justo
sapien. Etiam eleifend mauris non orci fringilla vulputate. Ut
imperdiet magna faucibus, sagittis ex eu, sagittis tellus. Vestibulum
faucibus vestibulum arcu non dictum. Nullam quis volutpat arcu, sit
amet viverra ante.
</p>
</div>
</div>
</main>
<script src="dist/global-nav.js"></script>
<script>
function toggleDropdown(toggle, open) {
var parentElement = toggle.parentNode;
var dropdown = document.getElementById(toggle.getAttribute('aria-controls'));
dropdown.setAttribute('aria-hidden', !open);
if (open) {
parentElement.classList.add('is-active');
} else {
parentElement.classList.remove('is-active');
}
}
function closeAllDropdowns(toggles) {
toggles.forEach(function (toggle) {
toggleDropdown(toggle, false);
});
}
function handleClickOutside(toggles, containerClass) {
document.addEventListener('click', function (event) {
var target = event.target;
if (target.closest) {
if (!target.closest(containerClass)) {
closeAllDropdowns(toggles);
}
}
});
}
function initNavDropdowns(containerClass) {
var toggles = [].slice.call(document.querySelectorAll(containerClass + ' [aria-controls]'));
handleClickOutside(toggles, containerClass);
toggles.forEach(function (toggle) {
toggle.addEventListener('click', function (e) {
e.preventDefault();
const shouldOpen = !toggle.parentNode.classList.contains('is-active');
closeAllDropdowns(toggles);
toggleDropdown(toggle, shouldOpen);
});
});
}
initNavDropdowns('.p-navigation__item--dropdown-toggle');
canonicalGlobalNav.createNav({ breakpoint: 1036 });
</script>
</body>
</html>