Changeset 25731

Timestamp:

10/08/2013 05:55:46 PM (11 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: provide keyboard support for the primary navigation, props joedolson. See #25054.

Location:

trunk/src/wp-content/themes/twentyfourteen

Files:

• js/theme.js (modified) (1 diff)
• style.css (modified) (3 diffs)

trunk/src/wp-content/themes/twentyfourteen/js/theme.js

@@ -118 +118 @@
     } );
 
+    /* Accessibility hover styles for menu. */
+    $( '.primary-navigation li' ).hover( function() {
+            $( this ).addClass( 'a11y-focus' );
+        }, function() {
+            $( this ).delay( '250' ).removeClass( 'a11y-focus' );
+        }
+    );
+    $( '.primary-navigation li a' ).on( 'focus blur', function() {
+            $( this ).parents().toggleClass( 'a11y-focus' );
+        }
+    );
+    
 } )( jQuery );

trunk/src/wp-content/themes/twentyfourteen/style.css

@@ -686 +686 @@
 .primary-navigation ul ul {
     background-color: rgba(0, 0, 0, 0.9);
-    display: none;
     float: left;
     position: absolute;
         top: 48px;
-        left: 0;
+        left: -999em;
     z-index: 99999;
 }
@@ -699 +698 @@
 }
 .primary-navigation ul ul ul {
-    left: 100%;
+    left: -999em;
     top: 0;
 }
@@ -716 +715 @@
     color: #8c8c8c;
 }
-.primary-navigation ul li:hover > ul {
-    display: block;
+.primary-navigation ul li:hover > ul,
+.primary-navigation ul li.a11y-focus > ul {
+    left: auto; 
+}
+.primary-navigation ul ul li:hover > ul,
+.primary-navigation ul ul li.a11y-focus > ul {
+    left: 100%;
 }
 .primary-navigation li.current_page_item > a,