Permalink
Browse files

added tab accessible dropdown menu

  • Loading branch information...
nathan-hinshaw committed Apr 22, 2012
1 parent 31962ac commit e32761c20d7081f0bd952f10ec27a4b2bae3bfd3
Showing with 175 additions and 1 deletion.
  1. +1 −1 README
  2. +124 −0 html/dropdown.html
  3. +42 −0 html/js/dropdown.js
  4. +4 −0 html/js/libs/jquery-1.7.1.min.js
  5. +4 −0 html/js/libs/modernizr-2.5.3.min.js
View
2 README
@@ -1 +1 @@
-# A collection of short cuts and snippets I am moving from local to Github
+# A collection of shortcuts and snippets I am moving to Github
View
@@ -0,0 +1,124 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<title>dropdown</title>
+
+<style type="text/css" media="screen">
+html{overflow-y:scroll;background:#ffffff;background:#ffffff;font-size:62.5%;}
+#nav,
+#nav ul { list-style: none; margin: 0; padding: 0; }
+#nav { background: pink; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-size:1.2rem; font-weight: 600; height: 2.286em; /* 32px / 14px */ line-height: 1.5em; /* 21px / 14px */ width: 960px; }
+#nav li { background: #16314b; float: left; height: 2.286em; /* 32px / 14px */ margin: 0; padding: 0; position: relative; }
+#nav a {color: #c7d0d9; display: block; padding: 0.286em 30px 0.5em; /* 4px 30px 7px */ text-decoration: none; }
+
+#nav a:hover,
+#nav a:focus { color: #fff }
+
+#nav ul { background: black; left: 0; font-size: 12px; font-size:1.2rem; line-height: 1.5em; /* 18px / 12px */ position: absolute; top: 2.286em; /* 32px / 14px */ width: 180px; }
+#nav ul li { background: none; float: none; height: auto; width: 180px; }
+#nav ul a { background: none; padding: 0.083em 30px 0.25em; /* 1px 30px 3px */ width: 120px; }
+#nav ul ul { font-size: 12px; font-size:1.2rem; }
+
+#nav ul a:hover,
+#nav ul a:focus { background: #16314b; }
+#nav ul .hover>a { background: #16314b; }
+
+#nav ul ul { left: 180px; top: 0.5em; /* 6px / 12px */ }
+
+#nav ul,
+#nav :hover ul ul,
+#nav .hover ul ul { margin-left: -9999px; }
+
+#nav li:hover>ul,
+#nav li.hover>ul,
+#nav a:focus+ul,
+#nav ul ul,
+#nav .hover a:focus { margin-left: 0; }
+#nav ul a:focus { margin-left: 9999px; }
+</style>
+</head>
+<body>
+ <ul id="nav">
+ <li>
+ <a href="#">Home</a>
+ </li>
+ <li>
+ <a href="#">Menu Item 1</a>
+ </li>
+ <li>
+ <a href="#">Menu Item 2</a>
+ <ul>
+ <li>
+ <a href="#">Second Level 1</a>
+ </li>
+ <li>
+ <a href="#">Second Level 2</a>
+ <ul>
+ <li>
+ <a href="#">Third Level 1</a>
+ </li>
+ <li>
+ <a href="#">Third Level 2</a>
+ </li>
+ <li>
+ <a href="#">Third Level 3</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Second Level 3</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Menu Item 3</a>
+ </li>
+ <li>
+ <a href="#">Menu Item 4</a>
+ <ul>
+ <li>
+ <a href="#">Second Level 4</a>
+ <ul>
+ <li>
+ <a href="#">Third Level 4</a>
+ <ul>
+ <li>
+ <a href="#">Fourth Level 1</a>
+ </li>
+ <li>
+ <a href="#">Fourth Level 2</a>
+ <ul>
+ <li>
+ <a href="#">Fifth Level 1</a>
+ </li>
+ <li>
+ <a href="#">Fifth Level 2</a>
+ </li>
+ <li>
+ <a href="#">Fifth Level 3</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Fourth Level 3</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Second Level 5</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
+<script type="text/javascript" src="js/dropdown.js"></script>
+<script type="text/javascript">dropdown('nav', 'hover', 250);</script>
+</body>
+</html>
View
@@ -0,0 +1,42 @@
+/**
+ * Adds and removes classes to a list of links to allow keyboard accessibility
+ *
+ * @param string dropDownId
+ * @param string hoverClass
+ * @param int mouseOffDelay
+ */
+function dropdown(dropdownId, hoverClass, mouseOffDelay) {
+ if(dropdown = document.getElementById(dropdownId)) {
+ var listItems = dropdown.getElementsByTagName('li');
+ for(var i = 0; i < listItems.length; i++) {
+ listItems[i].onmouseover = function() { this.className = addClass(this); }
+ listItems[i].onmouseout = function() {
+ var that = this;
+ setTimeout(function() { that.className = removeClass(that); }, mouseOffDelay);
+ this.className = that.className;
+ }
+
+ var anchor = listItems[i].getElementsByTagName('a');
+ anchor = anchor[0];
+ anchor.onfocus = function() { tabOn(this.parentNode); }
+ anchor.onblur = function() { tabOff(this.parentNode); }
+ }
+ }
+
+ function tabOn(li) {
+ if(li.nodeName == 'LI') {
+ li.className = addClass(li);
+ tabOn(li.parentNode.parentNode);
+ }
+ }
+
+ function tabOff(li) {
+ if(li.nodeName == 'LI') {
+ li.className = removeClass(li);
+ tabOff(li.parentNode.parentNode);
+ }
+ }
+
+ function addClass(li) { return li.className + ' ' + hoverClass; }
+ function removeClass(li) { return li.className.replace(hoverClass, ""); }
+}

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit e32761c

Please sign in to comment.