-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
253 lines (234 loc) · 11.5 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
252
253
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simply Navigation - A lightweight navigation component</title>
<meta property="og:title" content="Simply Navigation"/>
<meta name="description" property="og:description" content="A simple navigation component built using vanilla JS & Flexbox."/>
<meta property="og:url" content="https://github.com/obscuredetour/simply-nav/index.html"/>
<meta property="og:image" content="https://raw.githubusercontent.com/obscuredetour/simply-nav/master/assets/images/logo-full-dark.svg"/>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!-- Navigation / nav-wrapper component -->
<!-- Right-side hamburger markup -->
<header class="nav -right-aligned">
<nav class="nav-main">
<a class="nav-logo -mobile" href="#">
<img class="nav-logo__image" id="logo" src="assets/images/logo.svg" alt="Logo">
</a>
<ul class="nav-list" role="menu" aria-hidden="true">
<div class="nav-list__wrapper">
<li class="nav-list__item" role="none">
<a class="nav-logo" href="#">
<img class="nav-logo__image" id="logo" src="assets/images/logo.svg" alt="Logo">
</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="https://github.com/obscuredetour/simply-nav">GitHub</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#features">Features</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#custom">Customizable</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#how-to-use">How to use</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#example">Example Link</a>
</li>
</div>
</ul>
<button class="nav-toggle" type="button" aria-expanded="false">
<div class="burger -squeeze -offset" type="button">
<span class="burger-lines"></span>
</div>
</button>
</nav>
<ul class="nav-list -mobile" role="menu" aria-hidden="true">
<div class="nav-list__wrapper">
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="https://github.com/obscuredetour/simply-nav">GitHub</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#features">Features</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#custom">Customizable</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#how-to-use">How to use</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#example">Example Link</a>
</li>
</div>
<div class="nav-overlay"></div>
</ul>
</header>
<!-- Navigation / nav-wrapper component -->
<!-- Left-side hamburger markup -->
<!-- <header class="nav">
<nav class="nav-main">
<button class="nav-toggle" type="button" aria-expanded="false">
<div class="burger -squeeze -offset" type="button">
<span class="burger-lines"></span>
</div>
</button>
<ul class="nav-list" role="menu" aria-hidden="true">
<div class="nav-list__wrapper">
<li class="nav-list__item" role="none">
<a class="nav-logo" href="#">
<img class="nav-logo__image" id="logo" src="assets/images/logo.svg" alt="Logo">
</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="https://github.com/obscuredetour/simply-nav">GitHub</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#features">Features</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#custom">Customizable</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#how-to-use">How to use</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#example">Example</a>
</li>
</div>
</ul>
<a class="nav-logo -mobile" href="#">
<img class="nav-logo__image" id="logo" src="assets/images/logo.svg" alt="Logo">
</a>
</nav>
<ul class="nav-list -mobile" role="menu" aria-hidden="true">
<div class="nav-list__wrapper">
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="https://github.com/obscuredetour/simply-nav">GitHub</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#features">Features</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#custom">Customizable</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#how-to-use">How to use</a>
</li>
<li class="nav-list__item" role="none">
<a class="nav-list__link" role="menuitem" href="#example">Example</a>
</li>
</div>
<div class="nav-overlay"></div>
</ul>
</header> -->
<main>
<section>
<span class="image -left">
<img src="assets/images/logo-full.svg" alt="Simply nav logo">
</span>
<h1 class="_mt0">Simply Navigation</h1>
<p class="_mthalf subtitle">Lightweight simple navigation built with flexbox and vanilla JavaScript</p>
<h3 id="features">Features</h3>
<ul class="featured-list -features">
<li>No dependencies.</li>
<li>Fully responsive.</li>
<li>Built using Flexbox & vanilla JavaScript only.</li>
<li>Mobile menu closes when a link is selected.</li>
<li>Easy close mobile menu. Closable via 'X' and alt-side page overlay.</li>
<li>Buttons & links made for mobile. Large footprint for optimal finger usage.</li>
<li>Menu button animates to a close button 'X' (CSS only - <a href="https://github.com/march08/animated-burgers" target="_blank">thx march08</a>)</li>
<li>Mobile menu scrollable (if its content goes beyond the screen)</li>
<li>Page and body are not scrollable (when mobile menu open).</li>
<li>Written in SCSS.</li>
<li>Written using <a href="https://rscss.io/" target="_blank">RSCSS</a> guidelines.</li>
<li class="-new">Left & Right side layouts now supported.</li>
<li class="-new">ARIA/Accessibility updates, keyboard navigation.</li>
</ul>
<hr class="-major">
<h2 id="custom">Features</h2>
<h3 id="custom">Customizable</h3>
<ul class="featured-list">
<li>Breakpoint variable - <strong>default at 800px</strong></li>
<li>Sticky (fixed) navigation bar available. <a href="#sticky-nav">See below</a>.</li>
<li>Traditional or offset hamburger menu icons. <a href="#menu-icon">See below</a></li>
<li>Bottom mobile nav bar for the bold! <a href="#bottom-nav">See below</a></li>
</ul>
<hr id="sticky-nav">
<h4>Sticky (fixed) navigation</h4>
<p>To enable a fixed nav bar, add class <code>-sticky</code> to the <code>nav-main</code> element.</p>
<div class="flex-container">
<div class="box">
<p>Sticky Nav is <span class="sticky-text"><strong>Off</strong></span></p>
</div>
<div class="box -alt">
<h5>Toggle sticky nav bar</h5>
<button class="button-default -sticky">Toggle</button>
</div>
</div>
<p><strong>Note:</strong> Sticky navigation bar requires padding and/or margin on the parent or adjacent element. For example, on this page the adjacent <em>main</em> HTML element has a top padding of 6.5rem (nav height is 4.5rem).
</p>
<hr id="menu-icon">
<h4 class="new-pill">Menu icon</h4>
<p>To enable the traditional menu icon, remove class <code>-offset</code> from the <code>burger</code> element.</p>
<div class="flex-container">
<div class="box">
<p>Traditional icon is <span class="menu-text"><strong>Off</strong></span></p>
</div>
<div class="box -alt">
<h5>Toggle menu icon</h5>
<button class="button-default -menu">Toggle</button>
</div>
</div>
<hr id="bottom-nav">
<h4 class="new-pill">Bottom mobile nav bar</h4>
<p>To enable the bottom mobile nav bar, add class <code>-bottom</code> on the <code>nav-main</code> element.</p>
<div class="flex-container">
<div class="box">
<p>Bottom mobile nav bar is <span class="bottomnav-text"><strong>Off</strong></span></p>
</div>
<div class="box -alt">
<h5>Toggle bottom mobile nav</h5>
<button class="button-default -bottomnav">Toggle</button>
</div>
</div>
<p><strong>Note:</strong> Bottom mobile nav bar requires a sticky navigation bar. To enable a fixed nav bar, add class <code>-sticky</code> to the <code>nav-main</code> element. See the <a href="#sticky-nav">Sticky navigation</a> section for additional info.
</p>
<hr class="-major" id="how-to-use">
<h3>How to use</h3>
<p>Clone or download the repository to build a static website. Or alternatively insert the respective files into your project.</p>
<ul>
<li><code>simply-nav.js</code> - has all necessary JavaScript functions
<ul>
<li>File can be placed into your project or the anonymous function inside can be pasted into an existing JS file or <code><script></code> tag within an HTML file.</li>
</ul>
</li>
<li><code>nav.css</code> - has all necessary CSS styles for the navigation
<ul>
<li>File can be placed into your project or pasted into an existing CSS file or <code><style></code> tag within an HTML file.</li>
</ul>
</li>
<li>Markup structure can be found in <code>index.html</code>
<ul>
<li>The <code>nav-main</code> element contains all necessary markup for Simply Navigation to function.</li>
</ul>
</li>
<li>Standalone HTML file will be making a comeback in a future version.</li>
</ul>
<h3 id="example">Example Link</h3>
<p>This is an example that demonstrates an anchor link on the same page. The mobile menu closes when this link is chosen. This provides a more seamless experience for the user without requiring them to close the mobile menu after choosing a link.</p>
</section>
</main>
<footer class="footer">
<p class="poweredby">Powered with ❤️ by <a target="_blank" href="https://obscuredetour.com">obscure detour</a>. Located on <a target="_blank" href="https://github.com/obscuredetour/simply-nav">GitHub</a> under an <a target="_blank" href="https://github.com/obscuredetour/simply-nav/blob/master/LICENSE">MIT license</a>.</p>
</footer>
<script src="assets/js/simply-nav.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>