-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathdrop-menu.html
executable file
·71 lines (71 loc) · 5.22 KB
/
drop-menu.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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accessible Drop Menu Example</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/drop-menu.css" />
</head>
<body>
<!-- BEST TO INSERT ARIA TAGGING WITH JS SO THAT IT WON'T HINDER NON-JS USERS -->
<div class="container">
<a href="#main" class="skip-link">Skip to main content</a>
<p><a href="http://haltersweb.github.io/Accessibility/">View the library of solutions.</a></p>
<div role="navigation" class="mobile-hide" aria-label="Main menu">
<button type="button" class="close-drawer">Close Drawer</button>
<ul class="navigation">
<li class="navigation-item">
<a href="#" id="menuOneNavLink" class="navigation-link" aria-expanded="false" aria-haspopup="true" aria-owns="menuOneSubnav">Menu One</a>
<ul id="menuOneSubnav" class="sub-navigation" aria-describedby="menuOneNavLink">
<li class="sub-navigation-item"><a href="#" class="sub-navigation-link">Alpha</a></li>
<li class="sub-navigation-item"><a href="#" class="sub-navigation-link">Beta</a></li>
<li class="sub-navigation-item"><a href="#" class="sub-navigation-link">Gamma</a></li>
</ul>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Menu Two</a>
</li>
<li class="navigation-item">
<a href="#" id="menuThreeNavLink" class="navigation-link" aria-expanded="false" aria-haspopup="true" aria-owns="menuThreeSubnav">Menu Three</a>
<ul id="menuThreeSubnav" class="sub-navigation" aria-describedby="menuThreeNavLink">
<li class="sub-navigation-item"><a href="#" class="sub-navigation-link">Delta</a></li>
<li class="sub-navigation-item"><a href="#" class="sub-navigation-link">Epsilon</a></li>
</ul>
</li>
</ul>
</div>
<div class="page-wrapper" id="main" role="main" tabindex="-1">
<div class="header" role="banner">
<button type="button" class="triptych-nav-trigger">
<i class="svg triptych">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.8 25" role="img" aria-labelledby="triptychTitle" aria-describedby="triptychDesc" focusable="false">
<title id="triptychTitle">reveal navigation</title>
<desc id="triptychDesc">icon used to open and close the navigation tray</desc>
<rect fill="#FFFFFF" width="31.8" height="5"></rect>
<rect y="10" fill="#FFFFFF" width="31.8" height="5"></rect>
<rect y="20" fill="#FFFFFF" width="31.8" height="5"></rect>
</svg>
</i>
</button>
</div>
<div class="main" id="main" role="main">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum <a href="#">dolor sit amet</a>, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue <a href="#">scelerisque bibendum</a>. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
<p>Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
<p>Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
<p>Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.</p>
</div>
</div>
<div class="block-screen"></div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/namespacing.js"></script>
<script type="text/javascript" src="js/accessibility-helpers.js"></script>
<script type="text/javascript" src="js/block-screen.js"></script>
<script type="text/javascript" src="js/drop-menu.js"></script>
</body>
</html>