html-css-js/html/nojs-navbar.html at master · denisde4ev/html-css-js · GitHub

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

<style>
[form=_][type=radio][value=x1]:focus-visible ~ label:nth-of-type(1) ,
[form=_][type=radio][value=x2]:focus-visible ~ label:nth-of-type(2) ,
[form=_][type=radio][value=x3]:focus-visible ~ label:nth-of-type(3) {
outline: auto;
}

[form=_][type=radio][value=x1]:checked ~ label:nth-of-type(1) ,
[form=_][type=radio][value=x2]:checked ~ label:nth-of-type(2) ,
[form=_][type=radio][value=x3]:checked ~ label:nth-of-type(3) {
text-decoration: underline;
}


.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

</style>

<form onsubmit='console.log(document.activeElement);return!1' id=_>

	<textarea autofocus></textarea>


	<input class=sr-only form=_ id=value1 type=radio name=tab1 value=x1 oninput="console.log(this, 'Im checked')" onfocus="this.click()">


	<hr>

	<label for=value1>menu 1

		<ul role="menu">
			<li role="menuitem" class="top-level-entry-container">
				<a href="#link1" class="submenu-item " role="menuitem">link 1</a>
			</li>
			<li role="menuitem" class="top-level-entry-container">
				<a href="#link2" class="submenu-item " role="menuitem">link 2</a>
			</li>

		</ul>
	</label>


	<input class=sr-only form=_ id=value2 type=radio name=tab1 value=x2 oninput="console.log(this, 'Im checked')">
	<label for=value2>menu 2</label>


	<input class=sr-only form=_ id=value3 type=radio name=tab1 value=x3 oninput="console.log(this, 'Im checked')">
	<label for=value3>menu 3</label>

<input type=submit>

<script language=none src=https://cdn.jsdelivr.net/npm/umbrellajs></script>
<script language=none>
u('label.clickable').attr('tabindex','0').on('keydown',function(e){
	if (!(  e.key === 'Enter' || e.key === ' ' || e.key === 'Space'  )) return;
	e.stopPropagation();
	this.click();
	e.preventDefault();
})
</script>