Changeset 412

Timestamp:

02/21/2014 07:01:42 PM (11 years ago)

Author:

iandunn

Message:

WordCamp Base: Add support for responsive menus. props r3df. Fixes #358.

This does include the CSS rules to show the responsive menu on smaller devices by default, it just adds the necessary menu element and toggle script so that a WordCamp can use the Custom CSS module to make their site fully responsive.

Location:

sites/trunk/wordcamp.org/public_html/wp-content/themes/wordcamp-base

Files:

• header.php (modified) (1 diff)
• lib/navigation (added)
• lib/navigation/navigation.js (added)
• lib/structure/class-wcb-menu.php (modified) (1 diff)
• style.css (modified) (1 diff)

sites/trunk/wordcamp.org/public_html/wp-content/themes/wordcamp-base/header.php

@@ -23 +23 @@
         wp_enqueue_script( 'comment-reply' );
 
+    // Adds JavaScript for handling the navigation menu hide-and-show behavior to allow responsive menus.
+    wp_enqueue_script( 'wordcamp-base-navigation', get_template_directory_uri() . '/lib/navigation/navigation.js', array(), '1.0', true );
+
     /* Always have wp_head() just before the closing </head>
      * tag of your theme, or you will break many plugins, which

sites/trunk/wordcamp.org/public_html/wp-content/themes/wordcamp-base/lib/structure/class-wcb-menu.php

@@ -9 +9 @@
         <div id="<?php echo $this->get_id(); ?>" class="grid_12">
             <div id="access" role="navigation" class="clearfix">
+                <?php /* Toggle element for responsive menus */ ?>
+                <h3 class="menu-toggle"><?php _e( 'Menu', 'wordcampbase' ); ?></h3>
                 <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
                 <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'wordcampbase' ); ?>"><?php _e( 'Skip to content', 'wordcampbase' ); ?></a></div>

sites/trunk/wordcamp.org/public_html/wp-content/themes/wordcamp-base/style.css

@@ -376 +376 @@
     width: 940px;
 }
+#access .menu-toggle {
+    display: none;
+}
 #access .menu-header,
 div.menu {