10h30/trestle
1
0
Fork 0
mirror of https://github.com/10h30/trestle.git synced 2026-06-05 15:09:35 +09:00
Code Issues Packages Projects Releases Wiki Activity

Add option for mobile nav toggle style

Browse Source
This commit is contained in:
Braad
2015-05-22 12:19:57 -07:00
parent 4b85568883
commit 54eb9ab02c
5 changed files with 231 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
includes/admin/admin.php
Regular → Executable
+1
View File
@@ -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,
includes/admin/customizer.php
Regular → Executable
+23
View File
@@ -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]',
includes/functions/theme-functions.php
Regular → Executable
+19 -7
View File
@@ -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 ) {
includes/js/theme-jquery.js
Regular → Executable
+110 -95
View File
@@ -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( '<div class="toggle-buttons" />' );
$( '.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( '<div class="header-toggle-buttons" />' );
} else {
$( '.site-header .title-area' ).after( '<div class="header-toggle-buttons" />' );
}
// 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( '<a id="toggle-button-' + i + '" class="' + buttonClass + '" href="#">Toggle</a>' );
// 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( '<a id="toggle-button-' + i + '" class="' + buttonClass + '" href="#">' + navText + '</a>' );
// 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( '<a class="sub-icon" href="#">' + closedIcon + '</a>' );
$( '.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( '<a class="sub-icon" href="#">' + openIcon + '</a>' );
// 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( '<a class="sub-icon" href="#">' + closedIcon + '</a>' );
$( '.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( '<a class="sub-icon" href="#">' + openIcon + '</a>' );
// 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 */
style.css
Regular → Executable
+78 -12
View File
@@ -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;