From 54eb9ab02c85210a9714ef2a37b1b061656a5fa5 Mon Sep 17 00:00:00 2001 From: Braad Date: Fri, 22 May 2015 12:19:57 -0700 Subject: [PATCH] Add option for mobile nav toggle style --- includes/admin/admin.php | 1 + includes/admin/customizer.php | 23 +++ includes/functions/theme-functions.php | 26 +++- includes/js/theme-jquery.js | 205 +++++++++++++------------ style.css | 90 +++++++++-- 5 files changed, 231 insertions(+), 114 deletions(-) mode change 100644 => 100755 includes/admin/admin.php mode change 100644 => 100755 includes/admin/customizer.php mode change 100644 => 100755 includes/functions/theme-functions.php mode change 100644 => 100755 includes/js/theme-jquery.js mode change 100644 => 100755 style.css diff --git a/includes/admin/admin.php b/includes/admin/admin.php old mode 100644 new mode 100755 index f105d64..9deedcd --- a/includes/admin/admin.php +++ b/includes/admin/admin.php @@ -23,6 +23,7 @@ function trestle_settings_defaults() { 'logo_url_mobile' => '', 'favicon_url' => '', 'nav_primary_location' => 'full', + 'mobile_nav_toggle' => 'small-icon', 'search_in_nav' => '', 'read_more_text' => __( 'Read More »', 'trestle' ), 'revisions_number' => 3, diff --git a/includes/admin/customizer.php b/includes/admin/customizer.php old mode 100644 new mode 100755 index 72d6cb3..3416945 --- a/includes/admin/customizer.php +++ b/includes/admin/customizer.php @@ -142,6 +142,29 @@ function trestle_customizer_controls( $wp_customize ) { ) ); + // Mobile nav toggle. + $wp_customize->add_setting( + 'trestle-settings[mobile_nav_toggle]', + array( + 'default' => trestle_get_option( 'mobile_nav_toggle' ), + 'type' => 'option', + 'capability' => 'edit_theme_options', + ) + ); + $wp_customize->add_control( + 'trestle_mobile_nav_toggle_control', + array( + 'section' => 'trestle_settings_section', + 'settings' => 'trestle-settings[mobile_nav_toggle]', + 'label' => __( 'Mobile Menu Toggle', 'trestle' ), + 'type' => 'select', + 'choices' => array( + 'small-icon' => __( 'Small Icon', 'trestle' ), + 'big-button' => __( 'Big Button', 'trestle' ), + ) + ) + ); + // Primary nav extras. $wp_customize->add_setting( 'trestle-settings[search_in_nav]', diff --git a/includes/functions/theme-functions.php b/includes/functions/theme-functions.php old mode 100644 new mode 100755 index 2e864a3..b3e2bea --- a/includes/functions/theme-functions.php +++ b/includes/functions/theme-functions.php @@ -77,6 +77,16 @@ function trestle_header_actions() { // Theme jQuery. wp_enqueue_script( 'theme-jquery', get_stylesheet_directory_uri() . '/includes/js/theme-jquery.js', array( 'jquery' ), TRESTLE_THEME_VERSION, true ); + // Prepare and include some necessary variables. + $mobile_nav_text = apply_filters( 'trestle_mobile_nav_text', __( 'Navigation', 'trestle' ) ); + wp_localize_script( + 'theme-jquery', + 'trestle_vars', + array( + 'mobile_nav_text' => esc_attr( $mobile_nav_text ), + ) + ); + // Get WP uploads directory. $upload_dir = wp_upload_dir(); $upload_path = $upload_dir['basedir']; @@ -132,22 +142,16 @@ function trestle_body_classes( $classes ) { if ( 'bubble' == trestle_get_option( 'layout' ) ) $classes[] = 'bubble'; - /** - * Add link icon classes. - */ - + // Add link icon classes. if ( trestle_get_option( 'external_link_icons' ) ) { $classes[] = 'external-link-icons'; } - if ( trestle_get_option( 'email_link_icons' ) ) { $classes[] = 'email-link-icons'; } - if ( trestle_get_option( 'pdf_link_icons' ) ) { $classes[] = 'pdf-link-icons'; } - if ( trestle_get_option( 'doc_link_icons' ) ) { $classes[] = 'doc-link-icons'; } @@ -158,6 +162,14 @@ function trestle_body_classes( $classes ) { $classes[] = 'nav-primary-location-' . $nav_primary_location; } + // Add mobile menu toggle class. + $mobile_nav_toggle = esc_attr( trestle_get_option( 'mobile_nav_toggle' ) ); + if ( 'big-button' == $mobile_nav_toggle ) { + $classes[] = 'big-button-nav-toggle'; + } elseif ( 'small-icon' == $mobile_nav_toggle ) { + $classes[] = 'small-icon-nav-toggle'; + } + // Add footer widget number class. $footer_widgets_number = esc_attr( trestle_get_option( 'footer_widgets_number' ) ); if ( $footer_widgets_number ) { diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js old mode 100644 new mode 100755 index f51aa81..488da5e --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -6,137 +6,152 @@ * @package Trestle */ -// Executes when the document is ready +// Executes when the document is ready. jQuery( document ).ready( function( $ ) { - // Remove .no-jquery body class - $( 'body' ).removeClass( 'no-jquery' ); + // Store selectors we use multiple times. + $body = $( 'body' ); - // External Links - var h = window.location.host.toLowerCase(); - $( '[href^="http"]' ).not( '[href*="' + h + '"]' ).addClass( 'external-link' ).attr( "target", "_blank" ); + // Remove .no-jquery body class. + $body.removeClass( 'no-jquery' ); - // Add classes to different types of links - $( 'a[href^="mailto:"]' ).addClass( 'email-link' ); - $( 'a[href$=".pdf"]' ).attr({ "target":"_blank" }).addClass( 'pdf-link' ); - $( 'a[href$=".doc"]' ).attr({ "target":"_blank" }).addClass( 'doc-link' ); - $( 'a' ).has( 'img' ).addClass( 'image-link' ); + // External Links. + var h = window.location.host.toLowerCase(); + $( '[href^="http"]' ).not( '[href*="' + h + '"]' ).addClass( 'external-link' ).attr( "target", "_blank" ); - // Add classes to parts of lists - $( 'li:last-child' ).addClass( 'last' ); - $( 'li:first-child' ).addClass( 'first' ); - $( 'ul, ol' ).parent( 'li' ).addClass( 'parent' ); + // Add classes to different types of links. + $( 'a[href^="mailto:"]' ).addClass( 'email-link' ); + $( 'a[href$=".pdf"]' ).attr({ "target":"_blank" }).addClass( 'pdf-link' ); + $( 'a[href$=".doc"]' ).attr({ "target":"_blank" }).addClass( 'doc-link' ); + $( 'a' ).has( 'img' ).addClass( 'image-link' ); - // Create mobile header toggle buttons - $( '.site-header .title-area' ).after( '
' ); - $( '.site-header .widget-area, .nav-primary' ).each( function( i ) { + // Add classes to parts of lists. + $( 'li:last-child' ).addClass( 'last' ); + $( 'li:first-child' ).addClass( 'first' ); + $( 'ul, ol' ).parent( 'li' ).addClass( 'parent' ); - // Store target - $target = $( this ); + // Create container for toggle buttons. + if ( $body.hasClass( 'big-button-nav-toggle' ) ) { + $( '.site-header' ).after( '
' ); + } else { + $( '.site-header .title-area' ).after( '
' ); + } - // Scope variables - var $target, buttonClass, targetClass; + // Add either small icon toggles or big button toggle. + $( '.site-header .widget-area, .nav-primary' ).each( function( i ) { - // Setup classes - buttonClass = 'toggle-button'; - targetClass = $target.attr( 'class' ).split( /\s+/ ); + // Store target. + $target = $( this ); - // Add targets-[] class to buttonClass - $.each( targetClass, function( index, value ) { - buttonClass += ' targets-' + value; - }); + // Scope variables. + var $target, buttonClass, targetClass; - // Add nav-toggle class to buttonClass if the button is for the nav - if ( $target.is( 'nav' ) ) { - buttonClass += ' nav-toggle'; - } + // Setup classes. + buttonClass = 'toggle-button'; + targetClass = $target.attr( 'class' ).split( /\s+/ ); - // Add toggle buttons to header - $( '.toggle-buttons' ).prepend( 'Toggle' ); + // Add targets-[] class to buttonClass. + $.each( targetClass, function( index, value ) { + buttonClass += ' targets-' + value; + }); - // Add target class to nav and widget areas - $target.addClass( 'toggle-target-' + i ); - }); + // Add nav-toggle class to buttonClass if the button is for the nav. + if ( $target.is( 'nav' ) ) { + buttonClass += ' nav-toggle'; + } - // A widget areas and primary nav mobile toggle functionality - $( '.site-header .toggle-button' ).click( function( event ) { + // Allow the use of custom text when using the 'big-button' mobile nav style. + if ( $target.is( 'nav' ) && $( 'body' ).hasClass( 'big-button-nav-toggle' ) ) { + navText = trestle_vars['mobile_nav_text']; + } else { + navText = 'Toggle'; + } - // Prevent default behavior - event.preventDefault(); + // Add toggle buttons to header. + $( '.header-toggle-buttons' ).prepend( '' + navText + '' ); - // Scope our variables - var $button, $target; + // Add target class to nav and widget areas. + $target.addClass( 'toggle-target-' + i ); + }); - // Get toggle button that was clicked - $button = $( this ); + // A widget areas and primary nav mobile toggle functionality. + $( '.header-toggle-buttons .toggle-button' ).click( function( event ) { - // Match the button to the right target - $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) ); - console.log( 'Target: ' + $target.attr('class')); + // Prevent default behavior. + event.preventDefault(); - // Toggle buttons - $button.toggleClass( 'open' ); - $( '.site-header .toggle-button' ).not( $button ).removeClass( 'open' ); + // Scope our variables. + var $button, $target; - // Toggle targets - $target.toggleClass( 'open' ); - $( '[class*="toggle-target"]' ).not( $target ).removeClass( 'open' ); + // Get toggle button that was clicked. + $button = $( this ); - // Remove focus - $button.blur(); + // Match the button to the right target. + $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) ); - }); + // Toggle buttons. + $button.toggleClass( 'open' ); + $( '.header-toggle-buttons .toggle-button' ).not( $button ).removeClass( 'open' ); - // Mobile navigation icons - var closedIcon = '+'; - var openIcon = '-'; + // Toggle targets. + $target.toggleClass( 'open' ); + $( '[class*="toggle-target"]' ).not( $target ).removeClass( 'open' ); - // Insert the icons into the nav where appropriate - $( '.nav-primary' ).find( '.genesis-nav-menu .parent:not( .current-menu-item, .current_page_item, .current_page_parent, .current_page_ancestor) > a' ).after( '' + closedIcon + '' ); - $( '.nav-primary' ).find( '.genesis-nav-menu .parent.current-menu-item > a, .genesis-nav-menu .parent.current_page_item > a, .genesis-nav-menu .parent.current_page_parent > a, .genesis-nav-menu .parent.current_page_ancestor > a' ).after( '' + openIcon + '' ); + // Remove focus. + $button.blur(); - // Mobile navigation expand/contract functionality - $( '.sub-icon' ).click( function( event ) { + }); - // Prevent default behavior - event.preventDefault(); + // Mobile navigation icons. + var closedIcon = '+'; + var openIcon = '-'; - // Get icon click - var $icon = $( this ); + // Insert the icons into the nav where appropriate. + $( '.nav-primary' ).find( '.genesis-nav-menu .parent:not( .current-menu-item, .current_page_item, .current_page_parent, .current_page_ancestor) > a' ).after( '' + closedIcon + '' ); + $( '.nav-primary' ).find( '.genesis-nav-menu .parent.current-menu-item > a, .genesis-nav-menu .parent.current_page_item > a, .genesis-nav-menu .parent.current_page_parent > a, .genesis-nav-menu .parent.current_page_ancestor > a' ).after( '' + openIcon + '' ); - // Remove focus - $icon.blur(); + // Mobile navigation expand/contract functionality. + $( '.sub-icon' ).click( function( event ) { - // Expand/contract - $icon.next( 'ul' ).slideToggle().toggleClass( 'open' ); + // Prevent default behavior. + event.preventDefault(); - // Change the icon to indicate open/closed - if ( $icon.text().indexOf( closedIcon ) !== -1 ) { - $icon.text( openIcon ); - } else if ( $icon.text().indexOf( openIcon ) !== -1 ) { - $icon.text( closedIcon ); - } - }); + // Get icon click. + var $icon = $( this ); - // Header widget area expand/contract functionality - $( '.widget-area-toggle' ).click( function( event ) { + // Remove focus. + $icon.blur(); - // Prevent default behavior - event.preventDefault(); + // Expand/contract. + $icon.next( 'ul' ).slideToggle().toggleClass( 'open' ); - // Get button clicked - var $button = $( this ); + // Change the icon to indicate open/closed. + if ( $icon.text().indexOf( closedIcon ) !== -1 ) { + $icon.text( openIcon ); + } else if ( $icon.text().indexOf( openIcon ) !== -1 ) { + $icon.text( closedIcon ); + } + }); - // Remove focus - $button.blur(); + // Header widget area expand/contract functionality. + $( '.widget-area-toggle' ).click( function( event ) { - // Expand/contract - $button.toggleClass( 'open' ).next( '.widget-area' ).slideToggle(); - }); + // Prevent default behavior. + event.preventDefault(); - // Executes when complete page is fully loaded, including all frames, objects, and images - $( window ).on( 'load', function() { + // Get button clicked. + var $button = $( this ); - }); + // Remove focus. + $button.blur(); + + // Expand/contract. + $button.toggleClass( 'open' ).next( '.widget-area' ).slideToggle(); + }); + + // Executes when complete page is fully loaded, including all frames, objects, and images. + $( window ).on( 'load', function() { + + }); }); /* end of page load scripts */ \ No newline at end of file diff --git a/style.css b/style.css old mode 100644 new mode 100755 index cb102d0..b97c55f --- a/style.css +++ b/style.css @@ -678,6 +678,10 @@ Structure and Layout /* Site Containers --------------------------------------------- */ +.site-container { + position: relative; +} + .site-inner, .wrap { margin: 0 auto; @@ -1390,20 +1394,20 @@ Site Header /* Header Toggle Styles --------------------------------------------- */ -.site-header .toggle-buttons { +.header-toggle-buttons { font-size: 0; text-align: right; } -.site-header .toggle-button { +.header-toggle-buttons .toggle-button { margin-left: 15px; } -.site-header .toggle-button.open { +.header-toggle-buttons .toggle-button.open { color: #f15123; } -.site-header .toggle-button:before { +.header-toggle-buttons .toggle-button:before { content: "\f002"; font-family: FontAwesome; font-size: 28px; @@ -1411,8 +1415,49 @@ Site Header line-height: 1; } -.site-header .toggle-button.nav-toggle:before { +.header-toggle-buttons .toggle-button.nav-toggle:before { content: "\f0c9"; + font-weight: normal; + font-stretch: normal; + font-style: normal; + font-variant: normal; + -webkit-font-smoothing: antialiased; +} + +.big-button-nav-toggle .header-toggle-buttons .nav-toggle { + display: block; + background-color: #333; + color: #fff; + margin-left: 0; + font-size: 16px; + font-size: 1.6rem; + padding: 15px 26px; + padding: 1.5rem 2.6rem; + margin: 0 20px; + margin: 0 2rem; + text-align: center; + border-radius: 3px; + text-transform: uppercase; + -webkit-transition: all 0s; + -moz-transition: all 0s; + -ms-transition: all 0s; + -o-transition: all 0s; + transition: all 0s; +} + +.big-button-nav-toggle .header-toggle-buttons .nav-toggle:before { + content: "\f0ca"; + margin-right: 8px; + font-size: 16px; + font-size: 1.6rem; +} + +.big-button-nav-toggle .header-toggle-buttons .targets-widget-area { + position: absolute; + right: 20px; + right: 2rem; + top: 20px; + top: 2rem; } .nav-primary, @@ -1448,7 +1493,6 @@ Site Header transition: z-index 0s ease, opacity 0.25s 0s; } - /* Site Navigation ---------------------------------------------------------------------------------------------------- */ @@ -1591,6 +1635,12 @@ Site Navigation padding-right: 5rem; } +.big-button-nav-toggle .nav-primary { + margin: 4px 20px 0; + margin: 0.4rem 2rem 0; + border-radius: 3px; + box-shadow: none; +} /* Navigation Extras --------------------------------------------- */ @@ -1620,8 +1670,10 @@ Site Navigation } .genesis-nav-menu > .right .search-form { - display: inline-block; - padding: 8px 0; + display: block; + padding: 0; + margin: 0 auto; + text-align: center; } .genesis-nav-menu > .right input[type="submit"] { @@ -1672,6 +1724,7 @@ Site Navigation /* Header Primary Navigation --------------------------------------------- */ + .site-header .nav-primary { margin: 0; } @@ -1684,8 +1737,6 @@ Site Navigation padding-right: 0; } - - /* Non jQuery Styles --------------------------------------------- */ @@ -2229,6 +2280,7 @@ Media Queries /* Header Toggle Styles --------------------------------------------- */ + .nav-primary, .site-header .nav-primary, .site-header .widget-area { @@ -2247,11 +2299,11 @@ Media Queries background-color: transparent; } - .site-header .toggle-button { + .header-toggle-buttons .toggle-button, + .big-button-nav-toggle .header-toggle-buttons .toggle-button.nav-toggle { display: none; } - /* Content --------------------------------------------- */ @@ -2500,6 +2552,11 @@ Media Queries display: inline-block; } + .genesis-nav-menu > .right .search-form { + display: inline-block; + padding: 8px 0; + } + /* Sub Menus --------------------------------------------- */ @@ -2554,8 +2611,17 @@ Media Queries margin-left: -1px; } + /* Primary Navigation + --------------------------------------------- */ + + .big-button-nav-toggle .nav-primary { + margin: 0; + border-radius: 0; + } + /* Header Primary Navigation --------------------------------------------- */ + .site-header .nav-primary { background-color: transparent; text-align: right;