Skip to content

Instantly share code, notes, and snippets.

@HarryAdney

HarryAdney/index.html

Last active April 6, 2021 19:43
Show Gist options
  • Save HarryAdney/6d15d55d6fa93709fed43a8d29172a05 to your computer and use it in GitHub Desktop.
Save HarryAdney/6d15d55d6fa93709fed43a8d29172a05 to your computer and use it in GitHub Desktop.
Download ZIP
accessible navigation example
Raw
index.html
<!-- examples.anysurfer.be/dropdown/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible Dropdown Menu with Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/simpleAccessible.js"></script>
<link rel="stylesheet" href="css/style.css">
<style>
.navbar-default .navbar-nav > li > ul > li > a nav {
text-transform: uppercase;
}
.navbar {
margin-bottom: 0px;
}
.navbar-brand {
padding-top: 5px;
padding-bottom: 5px;
}
.navbar a, .subnav a {
text-decoration: inherit;
}
.nav, .nav ul, .nav li {
list-style: none;
}
@media (min-width: 768px) {
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
float: left;
margin: 0;
}
.nav ul {
background: #f8f8f8;
position: absolute;
top: 3.10em;
left: -9999px;
opacity: 0;
}
.nav li {
float: left;
position: relative;
}
.nav li > a {
float: left;
padding: 16px;
}
.nav li > a:hover, .nav li > a:focus {
background: #F0C425;
}
.nav li:focus > a, .nav li:hover > a {
background: #f8f8f8;
}
.nav > li:first-child > a {
border-left: 0;
}
.nav > li:last-child > a {
border-right: 0;
}
.nav li:hover ul, .nav li:focus ul, ul.show-menu {
left: 0;
opacity: 0.99;
}
.nav ul li {
float: none;
position: static;
}
.nav ul a {
float: none;
display: block;
color: #FFF;
font-size: 12px;
text-shadow: none;
border: 1px solid #e7e7e7;
border-width: 0 0 1px;
-webkit-transition: 0.1s linear all;
transition: 0.1s linear all;
}
.nav ul, .nav ul li:last-child a {
border: 0;
}
.nav ul a:hover, .nav ul a:focus {
background: #1F2E54;
color: #777;
text-shadow: none;
}
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #777;
background-color: #16213C;
}
.navbar-toggle {
background-color: #fff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #F0C425;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #1F2E54;
}
.navbar-default .navbar-nav > li > ul > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > ul > li > a:hover, .navbar-default .navbar-nav > li > ul > li > a:focus {
color: #000;
background: #f8f8f8;
}
.navbar-collapse {
max-height: 500px;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container narrow-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only" >Show Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" style="height: auto;">
<nav>
<ul class="nav navbar-nav">
<li>
<a href="http://example.com">Option 1</a>
</li>
<li>
<a href="#">Option 2</a>
<ul>
<li>
<a href="http://example.com">Sub 21</a>
</li>
<li>
<a href="http://example.com">Sub 22</a>
</li>
<li>
<a href="http://example.com">Sub 23</a>
</li>
<li>
<a href="http://example.com">Sub 24</a>
</li>
<li>
<a href="http://example.com">Sub 25</a>
</li>
</ul>
</li>
<li>
<a href="http://example.com#">Option 3</a>
</li>
<li class="">
<a href="#">Option 4</a>
<ul>
<li>
<a href="http://example.com">Sub 41</a>
</li>
<li>
<a href="http://example.com">Sub 42</a>
</li>
<li>
<a href="http://example.com">Sub 43</a>
</li>
<li>
<a href="http://example.com">Sub 44</a>
</li>
<li>
<a href="http://example.com">Sub 45</a>
</li>
</ul>
</li>
<li class="">
<a href="">Option 5</a>
<ul>
<li>
<a href="http://example.com">Sub 51</a>
</li>
<li>
<a href="http://example.com">Sub 52</a>
</li>
<li>
<a href="http://example.com">Sub 53</a>
</li>
</ul>
</li>
<li>
<a href="http://example.com">Option 6</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="container">
<h1>Accessible and responsive dropdown for navigation</h1>
<p>Based on: <a href="http://simplyaccessible.com/examples/css-menu/option-2/">http://simplyaccessible.com/examples/css-menu/option-2/</a> and Bootstrap</p>
<p>Download on <a href="https://github.com/AnySurfer/dropdown">Github</a></p>
<h2>Features</h2>
<ul>
<li>Keyboard accessible</li>
<li>The navigation is marked up as nested unordered lists and visible to screenreaders at all time, including the submenu-items. <br> They are visually hidden off screen with CSS (left: -9999px;).</li>
<li>All links show up in a screenreaders link list.</li>
</ul>
<h2>Screenreader tests</h2>
<ul>
<li>Jaws 13, 15 and 16 with IE9 in Windows 7</li>
<li>Jaws 13, 15, 16 with Firefox 35 in Windows 7</li>
<li>NVDA 2015.1 with IE9 in Windows 7</li>
<li>NVDA 2015.1 with Firefox 35 in Windows 7</li>
<li>VoiceOver 7 with Safari 8 in Mac OS X 10.10.3</li>
<li>VoiceOver with Safari 8 in iOS 8.3</li>
</ul>
</div>
<script>
$(function () {
$(".navbar-toggle").click(function(){
$( this ).children( ".sr-only" ).html($( this ).children( ".sr-only" ).html()=="Show Navigation" ? "Hide Navigation" : "Show Navigation");
});
});
</script>
<script>
// http://simplyaccessible.com/examples/css-menu/option-2/
$(function() {
$('.nav').setup_navigation();
});
$.fn.setup_navigation = function(settings) {
settings = jQuery.extend({
menuHoverClass: 'show-menu',
}, settings);
// Set tabIndex to -1 so that links can't receive focus until menu is open
$(this).find('> li > a').next('ul').find('a').attr('tabIndex', -1);
$(this).find('> li > a').hover(function() {
$(this).closest('ul').find('.' + settings.menuHoverClass).removeClass(settings.menuHoverClass).find('a').attr('tabIndex', -1);
});
$(this).find('> li > a').focus(function() {
$(this).closest('ul').find('.' + settings.menuHoverClass).removeClass(settings.menuHoverClass).find('a').attr('tabIndex', -1);
$(this).next('ul')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex', 0);
});
// Hide menu if click or focus occurs outside of navigation
$(this).find('a').last().keydown(function(e) {
if (e.keyCode == 9) {
// If the user tabs out of the navigation hide all menus
$('.' + settings.menuHoverClass).removeClass(settings.menuHoverClass).find('a').attr('tabIndex', -1);
}
});
$(document).click(function() {
$('.' + settings.menuHoverClass).removeClass(settings.menuHoverClass).find('a').attr('tabIndex', -1);
});
$(this).click(function(e) {
e.stopPropagation();
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment