Changeset 25731

Timestamp:

10/08/2013 05:55:46 PM (13 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,