-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (122 loc) · 7.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accessible Menu Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="./demo/style.css" rel="stylesheet">
</head>
<body>
<header class="container-fluid g-0"></header>
<main class="container-fluid">
<div class="row gap-3">
<div class="col-12">
<h1>Hello Accessible Menu!</h1>
<p>This is a demo and manual testing application for <a href="https://github.com/NickDJM/accessible-menu-bootstrap-5" target="_blank">accessible-menu-bootstrap-5</a>.</p>
<p>This app allows you to swamp between one, two, and three levels of navigation for all supported types of menus provided by accessible-menu.</p>
<p>You can also swap between light and dark mode for ease of use on you if you find white screens too bright.</p>
<p>For more in-depth information about how accessible-menu works, please read <a href="https://accessible-menu.dev" target="_blank">the documentation</a>.</p>
</div>
<section aria-labelledby="themeSettings" class="col-12">
<h2 id="themeSettings">Theme Settings</h2>
<div class="button-container">
<button id="themeToggle" class="btn btn-primary">Dark Mode</button>
</div>
</section><section aria-labelledby="menuStructureSettings">
<h2 id="menuStructureSettings">Menu Structure Settings</h2>
<div id="domButtons" class="button-container">
<button id="buttonSingleLevel" data-menu-structure="one"
class="active btn btn-primary">Single-Level Menu</button>
<button id="buttonTwoLevel" data-menu-structure="two" class="btn btn-primary">Two-Level
Menu</button>
<button id="buttonThreeLevel" data-menu-structure="three" class="btn btn-primary">Three-Level
Menu</button>
</div>
</section>
<section aria-labelledby="menuTypeSettings">
<h2 id="menuTypeSettings">Menu Type Settings</h2>
<div id="menuButtons" class="button-container">
<button id="buttonReset" data-menu-type="native" class="active btn btn-primary">Native
Bootstrap</button>
<button id="buttonDisclosureMenu" data-menu-type="Bootstrap5DisclosureMenu" class="btn btn-primary">Disclosure
Menu</button>
<button id="buttonMenubar" data-menu-type="Bootstrap5Menubar" class="btn btn-primary">Menubar</button>
<button id="buttonTreeview" data-menu-type="Bootstrap5Treeview" class="btn btn-primary">Treeview</button>
<button id="buttonTopLinkDisclosureMenu"
data-menu-type="Bootstrap5TopLinkDisclosureMenu" class="btn btn-primary">Top Link Disclosure Menu</button>
</div>
</section>
<section aria-labelledby="optionalKeySupportSettings">
<div>
<h2 id="optionalKeySupportSettings">Optional Key Support Settings</h2>
<p>Only applicable to Disclosure Menu and Top Link Disclosure Menu</p>
</div>
<div id="keyButtons" class="button-container">
<button id="buttonKeySupportOn" class="active btn btn-primary"
data-optional-key-support="true">On</button>
<button id="buttonKeySupportOff" class="btn btn-primary"
data-optional-key-support="false">Off</button>
</div>
</section>
<section aria-labelledby="hoverSettings">
<h2 id="hoverSettings">Hover Settings</h2>
<div id="hoverButtons" class="button-container">
<button id="buttonHoverOff" data-hover-type="off"
class="active btn btn-primary">Off</button>
<button id="buttonHoverOn" class="btn btn-primary" data-hover-type="on">On</button>
<button id="buttonHoverDynamic" class="btn btn-primary" data-hover-type="dynamic">Dynamic</button>
</div>
<div id="hoverDelays" class="input-container">
<div>
<label for="hoverDelay" class="form-label">Hover Delay (ms):</label>
<input id="hoverDelay" class="form-control" type="number" value="250" min="0" />
</div>
<div>
<label for="enterDelay" class="form-label">Enter Delay (ms):</label>
<input id="enterDelay" class="form-control" type="number" value="-1" min="-1" />
</div>
<div>
<label for="leaveDelay" class="form-label">Leave Delay (ms):</label>
<input id="leaveDelay" class="form-control" type="number" value="-1" min="-1" />
</div>
</section>
<section aria-labelledby="transitionSettings">
<h2 id="transitionSettings">Transition Settings</h2>
<div id="transitionButtons" class="button-container">
<button id="buttonTransitionOn" class="active btn btn-primary"
data-transition-class="collapsing">On</button>
<button id="buttonTransitionOff" class="btn btn-primary" data-transition-class="">Off</button>
</div>
<div id="transitionDelays" class="input-container">
<div>
<label for="transitionDuration" class="form-label">Transition Duration (ms):</label>
<input id="transitionDuration" class="form-control" type="number" value="350" min="0" />
</div>
<div>
<label for="openDuration" class="form-label">Open Duration (ms):</label>
<input id="openDuration" class="form-control" type="number" value="-1" min="-1" />
</div>
<div>
<label for="closeDuration" class="form-label">Close Duration (ms):</label>
<input id="closeDuration" class="form-control" type="number" value="-1" min="-1" />
</div>
</div>
<div id="bootstrapTransitionButtons" class="button-container">
<button id="buttonTransitionBootstrapOn" class="active btn btn-primary"
data-transition-bootstrap="true">Bootstrap Transitions</button>
<button id="buttonTransitionBootstrapOff" class="btn btn-primary"
data-transition-bootstrap="false">No Bootstrap Transitions</button>
</div>
</section>
</div>
</main>
<footer id="disclaimer" class="container pt-5">
<p class="fs-6 fw-light">Please note the menu provided in the header is for example purposes only. Links and link titles aren't actually related to the content of the page. It is only for demoing/testing accessible-menu's functionality.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script type="module" src="./demo/main.js"></script>
</body>
</html>