Finish first pass at mobile nav styles

carrieforde · Dec 6, 2015 · 2ce5e6e · 2ce5e6e
1 parent 1b6b6ea
commit 2ce5e6e
Show file tree

Hide file tree

Showing 11 changed files with 845 additions and 814 deletions.
diff --git a/header.php b/header.php
@@ -39,8 +39,15 @@
 		</div>
 
 		<nav id="site-navigation" class="main-navigation" role="navigation">
-			<div class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="menu-text"><?php esc_html_e( 'Menu', 'alcatraz' ); ?></span></div>
-			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
+			<div class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
+				<span class="menu-text"><?php esc_html_e( 'Menu', 'alcatraz' ); ?></span>
+			</div>
+			<div class="menu-overlay"></div>
+			<?php wp_nav_menu( array(
+				'theme_location' => 'primary',
+				'menu_id'        => 'primary-menu',
+				'container_id'   => 'primary-menu-wrap',
+			) ); ?>
 		</nav>
 
 		<?php do_action( 'alcatraz_after_header_inside' ); ?>

diff --git a/inc/choices.php b/inc/choices.php
@@ -60,7 +60,6 @@ function alcatraz_get_mobile_nav_style_options( $context = '' ) {
 		'slide-left'  => __( 'Slide from Left', 'alcatraz' ),
 		'slide-right' => __( 'Slide from Right', 'alcatraz' ),
 		'full-screen' => __( 'Full Screen', 'alcatraz' ),
-		'fade-in'     => __( 'Fade In', 'alcatraz' ),
 	);
 
 	return apply_filters( 'alcatraz_mobile_nav_style_options', $mobile_nav_styles, $context );

diff --git a/js/customizer.js b/js/customizer.js
@@ -47,7 +47,7 @@
 	// Handle live previewing for the mobile nav style.
 	wp.customize( 'alcatraz_options[mobile_nav_style]', function( value ) {
 		value.bind( function( to ) {
-			$body.removeClass( 'mobile-nav-style-default mobile-nav-style-slide-left mobile-nav-style-slide-right mobile-nav-style-full-screen mobile-nav-style-fade-in' );
+			$body.removeClass( 'mobile-nav-style-default mobile-nav-style-slide-left mobile-nav-style-slide-right mobile-nav-style-full-screen' );
 			$body.addClass( 'mobile-nav-style-' + to );
 		});
 	});

diff --git a/js/navigation.js b/js/navigation.js
@@ -28,7 +28,34 @@
 		$menu.addClass( 'nav-menu' );
 	}
 
-	$toggle.on( 'click', function() {
+	/**
+	 * Set up the mobile nav sub menu toggles.
+	 */
+	var closedIcon = '+';
+	var openIcon = '-';
+
+	// Insert the toggles into the nav where appropriate.
+	$menu.before( '<div class="inner-menu-toggle"></div>' );
+	$menu.find( 'li.menu-item-has-children > a' ).after( '<a class="sub-menu-toggle" href="#">' + closedIcon + '</a>' );
+
+	// Toggle the expanded state of sub-menus when the toggles are clicked.
+	$( '.sub-menu-toggle' ).on( 'click', function( e ) {
+
+		e.preventDefault();
+
+		var $this = $( this );
+
+		$this.blur().next( '.sub-menu' ).slideToggle().toggleClass( 'toggled' );
+
+		// Change the icon to indicate open/closed.
+		if ( $this.text().indexOf( closedIcon ) !== -1 ) {
+			$this.text( openIcon );
+		} else if ( $this.text().indexOf( openIcon ) !== -1 ) {
+			$this.text( closedIcon );
+		}
+	});
+
+	$toggle.add( '.inner-menu-toggle' ).on( 'click', function() {
 		if ( $container.hasClass( 'toggled' ) ) {
 			$container.removeClass( 'toggled' );
 			$toggle.attr( 'aria-expanded', 'false' );
@@ -75,31 +102,4 @@
 			self = self.parentElement;
 		}
 	}
-
-	/**
-	 * Set up the mobile nav sub menu toggles.
-	 */
-	var closedIcon = '+';
-	var openIcon = '-';
-
-	// Insert the toggles into the nav where appropriate.
-	$menu.find( '.menu-item-has-children.current-menu-parent > a' ).after( '<a class="sub-menu-toggle" href="#">' + closedIcon + '</a>' );
-	$menu.find( '.menu-item-has-children:not( .current-menu-parent ) > a' ).after( '<a class="sub-menu-toggle" href="#">' + openIcon + '</a>' );
-
-	// Toggle the expanded state of sub-menus when the toggles are clicked.
-	$( '.sub-menu-toggle' ).on( 'click', function( e ) {
-
-		e.preventDefault();
-
-		var $this = $( this );
-
-		$this.blur().next( '.sub-menu' ).slideToggle().toggleClass( 'toggled' );
-
-		// Change the icon to indicate open/closed.
-		if ( $this.text().indexOf( closedIcon ) !== -1 ) {
-			$this.text( openIcon );
-		} else if ( $this.text().indexOf( openIcon ) !== -1 ) {
-			$this.text( closedIcon );
-		}
-	});
 } )( jQuery );
diff --git a/rtl.css b/rtl.css
diff --git a/sass/base/_defaults.scss b/sass/base/_defaults.scss
@@ -16,6 +16,7 @@ html {
 
 body {
 	background: $color__background-body; /* Fallback for when there is no custom background color defined. */
+	overflow-x: hidden;
 }
 
 hr {

diff --git a/sass/base/_variables.scss b/sass/base/_variables.scss
@@ -4,7 +4,6 @@
  * Include all site variables in this file.
  */
 
-
 // 2.2.1 Colors
 
 // Color Palette
@@ -19,7 +18,7 @@ $true-white: #fff;
 $true-black: #000;
 
 // Background Colors
-$color__background-body: #fff;
+$color__background-body: $true-white;
 $color__background-screen: #f1f1f1;
 $color__background-hr: #ccc;
 $color__background-button: #e6e6e6;
@@ -45,6 +44,10 @@ $color__border-input: #ccc;
 $color__border-abbr: #666;
 $color__border-table: #eee;
 
+// Utility Colors
+$color__transparent-overlay: rgba(0,0,0,0.4);
+
+
 // 2.2.2 Typography
 $font__main: 'Source Sans Pro', sans-serif;
 $font__headings: 'Source Serif Pro', serif;