10h30/trestle
1
0
Fork 0
mirror of https://github.com/10h30/trestle.git synced 2026-07-11 18:56:07 +09:00
Code Issues Packages Projects Releases Wiki Activity

Fix mobile nav CSS and jQuery

Browse Source
This commit is contained in:
MickeyKay
2015-03-23 13:32:00 -07:00
parent c8861270e1
commit 8a097c4be2
2 changed files with 23 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
includes/js/theme-jquery.js
+8 -6
View File
@@ -27,7 +27,7 @@ jQuery( document ).ready( function( $ ) {
$( 'li:first-child' ).addClass( 'first' );
$( 'ul, ol' ).parent( 'li' ).addClass( 'parent' );
// Mobile header toggle buttons
// Create mobile header toggle buttons
$( '.site-header .title-area' ).after( '<div class="toggle-buttons" />' );
$( '.site-header .widget-area, .nav-primary' ).each( function( i ) {
@@ -58,7 +58,7 @@ jQuery( document ).ready( function( $ ) {
$target.addClass( 'toggle-target-' + i );
});
// Toggle widget areas and primary nav
// A widget areas and primary nav mobile toggle functionality
$( '.site-header .toggle-button' ).click( function( event ) {
// Prevent default behavior
@@ -70,11 +70,9 @@ jQuery( document ).ready( function( $ ) {
// 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+/ ) );
console.log( 'Target: ' + $target.attr('class'));
// Toggle buttons
$button.toggleClass( 'open' );
@@ -82,7 +80,11 @@ jQuery( document ).ready( function( $ ) {
// Toggle targets
$target.toggleClass( 'open' );
$( '[class^="toggle-target"]' ).not( $target ).removeClass( 'open' );
$( '[class*="toggle-target"]' ).not( $target ).removeClass( 'open' );
// Remove focus
$button.blur();
});
// Mobile navigation icons
style.css
+15 -22
View File
@@ -1368,15 +1368,11 @@ Site Header
.site-header .widget-area {
width: 100%;
padding: 20px;
background-color: #eee;
border: 1px solid #ddd;
border-width: 0;
overflow: hidden;
}
.site-header .widget-area.open {
padding: 20px;
border-width: 1px 0;
overflow: hidden;
}
.site-header .search-form {
@@ -1414,23 +1410,21 @@ Site Header
content: "\f0c9";
}
.nav-primary,
/*.site-header .nav-primary,*/
.site-header .widget-area {
position: absolute;
z-index: -999;
top: 100%;
left: 0;
right: 0;
max-height: 0;
opacity: 0;
filter: alpha(opacity=0);
box-shadow: 0 4px 8px 1px rgba(0,0,0,0.4);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all .5s ease, padding 0s .5s;
-moz-transition: all .5s ease, padding 0s .5s;
-ms-transition: all .5s ease, padding 0s .5s;
-o-transition: all .5s ease, padding 0s .5s;
transition: all .5s ease, padding 0s .5s;
-webkit-transition: opacity 0.25s ease, z-index 0s 0.25s;
-moz-transition: opacity 0.25s ease, z-index 0s 0.25s;
-ms-transition: opacity 0.25s ease, z-index 0s 0.25s;
-o-transition: opacity 0.25s ease, z-index 0s 0.25s;
transition: opacity 0.25s ease, z-index 0s 0.25s;
}
.site-container > .nav-primary {
@@ -1440,14 +1434,13 @@ Site Header
.nav-primary.open,
.widget-area.open {
z-index: 50;
max-height: 9999px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: opacity .5s ease, padding 0s 0s;
-moz-transition: opacity .5s ease, padding 0s 0s;
-ms-transition: opacity .5s ease, padding 0s 0s;
-o-transition: opacity .5s ease, padding 0s 0s;
transition: opacity .5s ease, padding 0s 0s;
filter: alpha(opacity=100);
-webkit-transition: z-index 0s ease, opacity 0.25s 0s;
-moz-transition: z-index 0s ease, opacity 0.25s 0s;
-ms-transition: z-index 0s ease, opacity 0.25s 0s;
-o-transition: z-index 0s ease, opacity 0.25s 0s;
transition: z-index 0s ease, opacity 0.25s 0s;
}