<title>Accessible Mega Menu Test Page</title>
<!-- styles for Terrill's test pages -->
<link rel="stylesheet" href="http://terrillthompson.com/tests/styles/tests.css" type="text/css">
<!-- styles to roughly approximate UW theme -->
<link rel="stylesheet" type="text/css" href="css/uw.css">
<!-- styles that make the menu work -->
<style type="text/css">
/* mega menu list */
.nav-menu {
display: block;
position: relative;
list-style: none;
margin: 0;
padding: 0;
z-index: 15;
}
/* a top level navigation item in the mega menu */
.nav-item {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
}
/* first descendant link within a top level navigation item */
.nav-item > a {
position: relative;
display: inline-block;
padding: 0.5em 1em;
margin: 0 0 -1px 0;
border: 1px solid transparent;
}
/* focus/open states of first descendant link within a top level
navigation item */
.nav-item > a:focus,
.nav-item > a.open {
border: 1px solid #dedede;
}
/* open state of first descendant link within a top level
navigation item */
.nav-item > a.open {
/* background-color: #fff; */
border-bottom: none;
z-index: 1;
}
/* sub-navigation panel */
.sub-nav {
position: absolute;
display: none;
top: 2.6em;
margin-top: -1px;
padding: 0.5em 1em;
border: 1px solid #dedede;
/* background-color: #fff; */
}
/* sub-navigation panel open state */
.sub-nav.open {
display: block;
}
/* list of items within sub-navigation panel */
.sub-nav ul {
display: inline-block;
vertical-align: top;
margin: 0 1em 0 0;
padding: 0;
}
/* list item within sub-navigation panel */
.sub-nav li {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<!-- include jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- include the jquery-accessibleMegaMenu plugin script -->
<script src="js/jquery-accessibleMegaMenu.js"></script>
<!-- initialize a selector as an accessibleMegaMenu -->
<script>
$(document).ready(function() {
$("nav").accessibleMegaMenu({
/* prefix for generated unique id attributes, which are required
to indicate aria-owns, aria-controls and aria-labelledby */
uuidPrefix: "accessible-megamenu",
/* css class used to define the megamenu styling */
menuClass: "nav-menu",
/* css class for a top-level navigation item in the megamenu */
topNavItemClass: "nav-item",
/* css class for a megamenu panel */
panelClass: "sub-nav",
/* css class for a group of items within a megamenu panel */
panelGroupClass: "sub-nav-group",
/* css class for the hover state */
hoverClass: "hover",
/* css class for the focus state */
focusClass: "focus",
/* css class for the open state */
openClass: "open"
});
});
</script>
<p>This example menu use Adobe's open source <a href="http://adobe-accessibility.github.io/Accessible-Mega-Menu/">Accessible Mega Menu</a>. For an explanation see my blog post <a href="/blog">Accessible Dropdown Menus Revisited</a>.</p>
<nav id="dawgdrops">
<ul class="nav-menu">
<li class="nav-item">
<a href="somepage.html">About</a>
<div class="sub-nav">
<ul class="sub-nav-group">
<li><a href="somepage.html">Accessibility</a></li>
<li><a href="somepage.html">Admissions</a></li>
<li><a href="somepage.html">Diversity</a></li>
<li><a href="somepage.html">Governance</a></li>
</ul>
<ul class="sub-nav-group">
<li><a href="somepage.html">Leadership</a></li>
<li><a href="somepage.html">Mission Statement</a></li>
<li><a href="somepage.html">Research</a></li>
<li><a href="somepage.html">Teaching</a></li>
</ul>
<ul class="sub-nav-group">
<li><a href="somepage.html">Contact Us</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="somepage.html" >Academics</a>
<div class="sub-nav">
<ul class="sub-nav-group">
<li><a href="somepage.html">Degree Programs</a></li>
<li><a href="somepage.html">Faculty</a></li>
<li><a href="somepage.html">Distance Learning</a></li>
<li><a href="somepage.html">Libraries</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="somepage.html">Admissions</a>
<div class="sub-nav">
<ul class="sub-nav-group">
<li><a href="somepage.html">Undergraduate</a></li>
<li><a href="somepage.html">Tuition</a></li>
<li><a href="hsomepage.html">Financial Aid</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="somepage.html" >Visitors</a>
<div class="sub-nav">
<ul class="sub-nav-group">
<li><a href="somepage.html">Events</a></li>
<li><a href="somepage.html">Campus Map</a></li>
<li><a href="somepage.html">Parking</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<p>To exit the menu, <a href="somepage.html">press tab again</a> and you should land safely in this paragraph.</p>