-
-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
101 lines (101 loc) · 5.37 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
<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.css"/>
<link rel="stylesheet" href="./demo/style.css"/>
</head>
<body>
<header></header>
<main>
<h1>Hello Accessible Menu!</h1>
<p>This is a demo and manual testing application for <a href="https://github.com/NickDJM/accessible-menu" target="_blank">accessible-menu</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.netlify.app/" target="_blank">the documentation</a>.</p>
<section aria-labelledby="themeSettings">
<h2 id="themeSettings">Theme Settings</h2>
<div class="button-container">
<button id="themeToggle">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">Single-Level Menu</button>
<button id="buttonTwoLevel" data-menu-structure="two">Two-Level Menu</button>
<button id="buttonThreeLevel" data-menu-structure="three">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">Native DOM</button>
<button id="buttonDisclosureMenu" data-menu-type="DisclosureMenu">Disclosure Menu</button>
<button id="buttonMenubar" data-menu-type="Menubar">Menubar</button>
<button id="buttonTreeview" data-menu-type="Treeview">Treeview</button>
<button id="buttonTopLinkDisclosureMenu" data-menu-type="TopLinkDisclosureMenu">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" data-optional-key-support="true">On</button>
<button id="buttonKeySupportOff" 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">Off</button>
<button id="buttonHoverOn" data-hover-type="on">On</button>
<button id="buttonHoverDynamic" data-hover-type="dynamic">Dynamic</button>
</div>
<div id="hoverDelays" class="input-container">
<div class="input-group">
<label for="hoverDelay">Hover Delay (ms):</label>
<input id="hoverDelay" type="number" value="250" min="0" />
</div>
<div class="input-group">
<label for="enterDelay">Enter Delay (ms):</label>
<input id="enterDelay" type="number" value="-1" min="-1" />
</div>
<div class="input-group">
<label for="leaveDelay">Leave Delay (ms):</label>
<input id="leaveDelay" 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" data-transition-class="transitioning">On</button>
<button id="buttonTransitionOff" data-transition-class="">Off</button>
</div>
<div id="transitionDelays" class="input-container">
<div class="input-group">
<label for="transitionDuration">Transition Duration (ms):</label>
<input id="transitionDuration" type="number" value="250" min="0" />
</div>
<div class="input-group">
<label for="openDuration">Open Duration (ms):</label>
<input id="openDuration" type="number" value="-1" min="-1" />
</div>
<div class="input-group">
<label for="closeDuration">Close Duration (ms):</label>
<input id="closeDuration" type="number" value="-1" min="-1" />
</div>
</div>
</section>
</main>
<footer id="disclaimer">
<p>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 type="module" src="./demo/main.js"></script>
</body>
</html>