-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexample.html
More file actions
301 lines (296 loc) · 22.2 KB
/
example.html
File metadata and controls
301 lines (296 loc) · 22.2 KB
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
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hrk-toggle examples</title>
<link rel="stylesheet" href="hrk-toggle.css">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body style="margin: 0">
<nav class="hrk-navbar">
<input class="hrk-toggle hrk-bar-toggle" type="checkbox" id="hrk-MenuToggle">
<label class="hrk-toggle-fmt-onoff" for="hrk-MenuToggle"><span class="hrk-toggle-fmt-onoff-on"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></span><span class="hrk-toggle-fmt-onoff-off"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></label>
<div class="hrk-bar-perm hrk-menu">
<div class="hrk-leaf">
<a href="#">Example.com</a>
</div>
</div>
<div class="hrk-menu hrk-menu-responsive">
<div class="hrk-leaf"><a href="#">Nav-1</a></div>
<div class="hrk-leaf"><span class="hrk-a">Nav-2</span></div>
<div class="hrk-tree">
<div class="hrk-toggle-close-menu"><input class="hrk-toggle" type="radio" id="cid-1-3-close" name="hrk-navbar"><label for="cid-1-3-close">⨯</label></div>
<input class="hrk-toggle" type="radio" id="cid-1-3" name="hrk-navbar">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-3"></label>
<div class="hrk-tree-node">
<a href="#">Nav-3</a>
<div class="hrk-tree-children">
<div class="hrk-leaf"><a href="#">Nav-3-1</a></div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="cid-1-3-2">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-3-2"></label>
<div class="hrk-tree-node">
<a href="#">Nav-3-2</a>
<div class="hrk-tree-children">
<div class="hrk-leaf">
<a href="#">Nav-3-2-1</a>
</div>
<div class="hrk-leaf">
<a href="#">Nav-3-2-2</a>
</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="cid-1-3-2-3">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-3-2-3"></label>
<div class="hrk-tree-node">
<a href="#">Nav-3-2-3</a>
<div class="hrk-tree-children">
<div class="hrk-leaf"><a href="#">Nav-3-2-2-1</a></div>
<div class="hrk-leaf"><a href="#">Nav-3-2-2-2</a></div>
<div class="hrk-leaf"><a href="#">Nav-3-2-2-3</a></div>
<div class="hrk-leaf"><a href="#">Nav-3-2-2-4</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="cid-1-3-3">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-3-3"></label>
<div class="hrk-tree-node">
<a href="#">Nav-3-3</a>
<div class="hrk-tree-children">
<div class="hrk-leaf">
<a href="#">Nav-3-3-1</a>
</div>
<div class="hrk-leaf">
<a href="#">Nav-3-3-2</a>
</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="cid-1-3-3-3">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-3-3-3"></label>
<div class="hrk-tree-node">
<a href="#">Nav-3-3-3</a>
<div class="hrk-tree-children">
<div class="hrk-leaf"><a href="#">Nav-3-3-3-1</a></div>
<div class="hrk-leaf"><a href="#">Nav-3-3-3-2</a></div>
<div class="hrk-leaf"><a href="#">Nav-3-3-3-3</a></div>
<div class="hrk-leaf"><a href="#">Nav-3-3-3-4</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hrk-leaf"><a href="#">Nav-3-4</a></div>
</div>
</div>
</div>
<div class="hrk-tree">
<div class="hrk-toggle-close-menu"><input class="hrk-toggle" type="radio" id="cid-1-4-close" name="hrk-navbar"><label for="cid-1-4-close">⨯</label></div>
<input class="hrk-toggle" type="radio" id="cid-1-4" name="hrk-navbar">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-4"></label>
<div class="hrk-tree-node">
<a href="#">Nav-4</a>
<div class="hrk-tree-children">
<div class="hrk-leaf"><a href="#">Nav-4-1</a></div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="cid-1-4-2">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-4-2"></label>
<div class="hrk-tree-node">
<a href="#">Nav-4-2</a>
<div class="hrk-tree-children">
<div class="hrk-leaf">
<a href="#">Nav-4-2-1</a>
</div>
<div class="hrk-leaf">
<a href="#">Nav-4-2-2</a>
</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="cid-1-4-2-3">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-4-2-3"></label>
<div class="hrk-tree-node">
<a href="#">Nav-4-2-3</a>
<div class="hrk-tree-children">
<div class="hrk-leaf"><a href="#">Nav-4-2-2-1</a></div>
<div class="hrk-leaf"><a href="#">Nav-4-2-2-2</a></div>
<div class="hrk-leaf"><a href="#">Nav-4-2-2-3</a></div>
<div class="hrk-leaf"><a href="#">Nav-4-2-2-4</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="cid-1-4-3">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-4-3"></label>
<div class="hrk-tree-node">
<a href="#">Nav-4-3</a>
<div class="hrk-tree-children">
<div class="hrk-leaf">
<a href="#">Nav-4-3-1</a>
</div>
<div class="hrk-leaf">
<a href="#">Nav-4-3-2</a>
</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="cid-1-4-3-3">
<label class="hrk-toggle-fmt-plusminus" for="cid-1-4-3-3"></label>
<div class="hrk-tree-node">
<a href="#">Nav-4-3-3</a>
<div class="hrk-tree-children">
<div class="hrk-leaf"><a href="#">Nav-4-3-3-1</a></div>
<div class="hrk-leaf"><a href="#">Nav-4-3-3-2</a></div>
<div class="hrk-leaf"><a href="#">Nav-4-3-3-3</a></div>
<div class="hrk-leaf"><a href="#">Nav-4-3-3-4</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hrk-leaf"><a href="#">Nav-4-4</a></div>
</div>
</div>
</div>
<div class="hrk-leaf"><a href="#">Nav-5</a></div>
</div>
<div class="hrk-bar-perm hrk-bar-item hrk-menu hrk-menu-perm hrk-bar-last">
<div class="hrk-tree">
<div class="hrk-toggle-close-menu"><input class="hrk-toggle" type="radio" id="navbar-extra-search-close" name="navbar-extra-toggle"><label class="hrk-toggle-fmt-x" for="navbar-extra-search-close"></label></div>
<input class="hrk-toggle" type="radio" id="navbar-extra-search" name="navbar-extra-toggle">
<label class="hrk-toggle-fmt-caret" for="navbar-extra-search"></label>
<div class="hrk-tree-node">
<a href="#" title="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></a>
<div class="hrk-tree-children">
<form>
<div>
<div class="hrk-flex-column">
<label for="edit-keys">Enter your keywords </label>
<input type="text" id="edit-keys" name="keys" value="" maxlength="255">
</div>
<input type="submit" id="edit-submit" name="op" value="Search">
</div>
</form>
</div>
</div>
</div>
<div class="hrk-tree">
<div class="hrk-toggle-close-menu"><input class="hrk-toggle" type="radio" id="navbar-extra-user-close" name="navbar-extra-toggle"><label class="hrk-toggle-fmt-x" for="navbar-extra-user-close"></label></div>
<input class="hrk-toggle" type="radio" id="navbar-extra-user" name="navbar-extra-toggle">
<label class="hrk-toggle-fmt-caret" for="navbar-extra-user"></label>
<div class="hrk-tree-node">
<a href="#account" title="Account" class="uk-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></a>
<div class="hrk-tree-children"><div class="hrk-leaf"><a href="/user">My account</a></div><div class="last leaf hrk-leaf"><a href="#logout">Log out</a></div>
</div>
</div>
</div>
</div>
</nav>
<div class="hrk-flex-row" style="width: 100%; justify-content: space-evenly; align-items: flex-start">
<div class="hrk-bar hrk-margin-medium">
<input class="hrk-toggle hrk-bar-toggle" type="checkbox" id="hrk-SideLeftToggle">
<label class="hrk-toggle-fmt-onoff" for="hrk-SideLeftToggle">
<div class="hrk-toggle-fmt-onoff-on"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/></svg></div>
<div class="hrk-toggle-fmt-onoff-off"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/></svg></div>
</label>
<div class="hrk-menu hrk-menu-responsive" style="flex-direction: column">
<div>A hierarchical navigation tree that goes responsive for small screens.</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="lsb">
<label class="hrk-toggle-fmt-caret" for="lsb"></label>
<div class="hrk-tree-node">
<a href="#">Tree</a>
<div class="hrk-tree-children">
<div class="hrk-leaf">
<a href="#">Item-1</a>
</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="lsb-2">
<label class="hrk-toggle-fmt-caret" for="lsb-2"></label>
<div class="hrk-tree-node">
<a href="#">Item-2</a>
<div class="hrk-tree-children">
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="lsb-2-1">
<label class="hrk-toggle-fmt-caret" for="lsb-2-1"></label>
<div class="hrk-tree-node">
<a href="#">Item-2-1</a>
<div class="hrk-tree-children">
<div class="hrk-leaf"><a href="#">Item-2-1</a></div>
<div class="hrk-leaf"><a href="#">Item-2-2</a></div>
<div class="hrk-leaf"><a href="#">Item-2-3</a></div>
</div>
</div>
</div>
<div class="hrk-leaf"><a href="#">Item-2-2</a></div>
</div>
</div>
</div>
<div class="hrk-tree">
<input class="hrk-toggle" type="checkbox" id="lsb-3">
<label class="hrk-toggle-fmt-caret" for="lsb-3"></label>
<div class="hrk-tree-node">
<a href="#">Item-3</a>
<div class="hrk-tree-children">
<div class="hrk-leaf"><a href="#">Item-3-1</a></div>
<div class="hrk-leaf"><a href="#">Item-3-2</a></div>
<div class="hrk-leaf"><a href="#">Item-3-3</a></div>
<div class="hrk-leaf"><a href="#">Item-3-4</a></div>
</div>
</div>
</div>
<div class="hrk-leaf">
<a href="#">Item-4</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hrk-flex-main-item">
<img class="hrk-float-right hrk-margin-medium" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Exploding_E_match_collage.jpg/240px-Exploding_E_match_collage.jpg" alt="Public domain photo of an electronic match attributed to Lucas van den Bosch. More information at https://commons.wikimedia.org/wiki/File:Exploding_E_match_collage.jpg">
<h1>Responsive Navbar, menus, page elements, and hierchical trees without using Javascript</h1>
<p>Most responsive HTML elements, and especially navigation bars and menus employ Javascript and a Jquery or Jquery-like Javascript library to figure out when the website needs to do a layout change. Jquery-like libraries are fine and good, but they are also constantly changing, so the disadvantages of this approach are:
<ul>
<li>Dependency on a particular version of the Jquery-like library: When that library changes or upgrades, then behavior will change. When this happens, you may have to debug Javascript as well as CSS and HTML to get to the bottom of a new problem. You may also run into the need to keep the older Javascript library for one purpose while simultaneously loading a newer version of the same library for another purpose on the same webpage... and then, things get unnecessarily complicated.</li>
<li>Browser workload: The browser has to process the Javascript library and to do a bunch of other work before the page can load properly.</li>
</ul>
</p>
<p>So, using Jquery-like libraries for responsive behaviors wastes bandwidth loading extra Javascript libraries, and then makes browsers process piles of extra code. And, the website developer gets a new problem to solve (debugging Javascript), which may not be their bailiwick. In other words, the page loads slower and is less reliable in the long term.</p>
<p>Using the checkbox-hack that has now become supported by almost every web browser, you can accomplish many interesting things, including responsive navigation bars, hierarchical tree navigation, and responsive page elements, simply by using the hrk-toggle CSS library and particularly, structured HTML. The only downside is that the HTML is more complicated than simple HTML list tags.</p>
<p>This page is an example page that shows how the extremely tiny <a href="https://hkern0.com/hrk-toggle" title="HTML-only Non-javascript CSS library for HTML-based responsive navigation bars, menus, responsive page elements, and hierarchical tree navigation.">hrk-toggle CSS library</a> can be used to create:
<ul><li>a responsive navigation bar at the top,</li>
<li>responsive sidebars left and right,</li>
<li>a navigable hierarchical tree inside the left sidebar,</li>
<li>a responsive footer...</li>
</ul>
all without using a single speck of Javascript.</p>
</div>
<div class="hrk-bar hrk-margin-medium" style="align-self: flex-end">
<input class="hrk-toggle hrk-bar-toggle" type="checkbox" id="hrk-SideRightToggle">
<label class="hrk-toggle-fmt-ellipsis" for="hrk-SideRightToggle"></label>
<div class="hrk-menu hrk-menu-responsive">
Right sidebar information is responsive, and toggled on and off with the ellipsis toggle format
</div>
</div>
</div>
<hr>
<div class="hrk-bar hrk-margin-medium">
<input class="hrk-toggle hrk-bar-toggle" type="checkbox" id="responsive-copyright-footer">
<label class="hrk-toggle-fmt-onoff hrk-margin-medium" for="responsive-copyright-footer">
<div class="hrk-toggle-fmt-onoff-on">©</div>
<div class="hrk-toggle-fmt-onoff-off"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 19.1H3V5h18v14.1zM21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path fill="none" d="M21 19.1H3V5h18v14.1zM21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41z"/><path fill="none" d="M0 0h24v24H0z"/></svg></div>
</label>
<div class="hrk-menu hrk-menu-responsive" style="width: 100%; justify-content: space-evenly; align-items: flex-start; flex-direction: row">
<div>Footer with various things including copyright notices and how to contact the <a href="https://hkern0.com">software developer</a></div>
<div class="hrk-bar-last">© Copyright 2019 Hugh R. Kern<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p></div>
</div>
</div>
</body>
</html>