Twenty Twelve: rework navigation to remove need for jQuery and support wp_page_menu markup better. Fixes #21562.
git-svn-id: http://core.svn.wordpress.org/trunk@21611 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett
parent
641bcf2656
commit
5975114fff
|
|
@ -104,7 +104,7 @@ function twentytwelve_scripts_styles() {
|
|||
* JavaScript for handling navigation menus and the resized
|
||||
* styles for small screen sizes.
|
||||
*/
|
||||
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120820', true );
|
||||
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120824', true );
|
||||
|
||||
/**
|
||||
* Load special font CSS file.
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@
|
|||
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
|
||||
</hgroup>
|
||||
|
||||
<nav class="site-navigation main-navigation" role="navigation">
|
||||
<nav id="site-navigation" class="main-navigation" role="navigation">
|
||||
<h3 class="menu-toggle"><?php _e( 'Show menu', 'twentytwelve' ); ?></h3>
|
||||
<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
|
||||
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
|
||||
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
|
||||
</nav>
|
||||
|
||||
<?php $header_image = get_header_image();
|
||||
|
|
|
|||
|
|
@ -3,14 +3,27 @@
|
|||
*
|
||||
* Handles toggling the navigation menu for small screens.
|
||||
*/
|
||||
( function() {
|
||||
var button = document.getElementById( 'site-navigation' ).getElementsByTagName( 'h3' )[0],
|
||||
menu = document.getElementById( 'site-navigation' ).getElementsByTagName( 'ul' )[0];
|
||||
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
if ( ! $( '#masthead .menu' ).children().length ) {
|
||||
$( '#masthead .menu-toggle' ).hide();
|
||||
}
|
||||
if ( undefined == button || undefined == menu )
|
||||
return false;
|
||||
|
||||
$( '.menu-toggle' ).off( 'click' ).click( function() {
|
||||
$( '#masthead .menu' ).stop().slideToggle();
|
||||
$( this ).toggleClass( 'toggled-on' );
|
||||
} );
|
||||
} );
|
||||
button.onclick = function() {
|
||||
if ( -1 == menu.className.indexOf( 'nav-menu' ) )
|
||||
menu.className = 'nav-menu';
|
||||
|
||||
if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
|
||||
button.className = button.className.replace( ' toggled-on', '' );
|
||||
menu.className = menu.className.replace( ' toggled-on', '' );
|
||||
} else {
|
||||
button.className += ' toggled-on';
|
||||
menu.className += ' toggled-on';
|
||||
}
|
||||
};
|
||||
|
||||
// Hide menu toggle button if menu is empty.
|
||||
if ( ! menu.childNodes.length )
|
||||
button.style.display = 'none';
|
||||
} )();
|
||||
13
rtl.css
13
rtl.css
|
|
@ -55,15 +55,6 @@ td {
|
|||
}
|
||||
|
||||
|
||||
/* =Basic structure
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.main-navigation li ul ul {
|
||||
margin-left: 0;
|
||||
margin-right: 40px;
|
||||
margin-right: 2.857142857rem;
|
||||
}
|
||||
|
||||
/* =Main Content
|
||||
----------------------------------------------- */
|
||||
|
||||
|
|
@ -220,6 +211,10 @@ label ~ span.required {
|
|||
margin: 0 24px 0;
|
||||
margin: 0 1.714285714rem 0;
|
||||
}
|
||||
.main-navigation ul.nav-menu,
|
||||
.main-navigation div.nav-menu > ul {
|
||||
text-align: right;
|
||||
}
|
||||
.main-navigation li {
|
||||
margin-left: 40px;
|
||||
margin-left: 2.857142857rem;
|
||||
|
|
|
|||
25
style.css
25
style.css
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Theme Name: Twenty Twelve
|
||||
13Theme Name: Twenty Twelve
|
||||
Theme URI: http://wordpress.org/extend/themes/twentytwelve
|
||||
Author: the WordPress team
|
||||
Author URI: http://wordpress.org/
|
||||
|
|
@ -513,10 +513,6 @@ a:hover {
|
|||
margin-top: 1.714285714rem;
|
||||
text-align: center;
|
||||
}
|
||||
.main-navigation li ul ul {
|
||||
margin-left: 40px;
|
||||
margin-left: 2.857142857rem;
|
||||
}
|
||||
.main-navigation li {
|
||||
margin-top: 24px;
|
||||
margin-top: 1.714285714rem;
|
||||
|
|
@ -531,9 +527,11 @@ a:hover {
|
|||
.main-navigation a:hover {
|
||||
color: #21759b;
|
||||
}
|
||||
.main-navigation .menu {
|
||||
.main-navigation ul.nav-menu,
|
||||
.main-navigation div.nav-menu > ul {
|
||||
display: none;
|
||||
}
|
||||
.main-navigation ul.nav-menu.toggled-on,
|
||||
.menu-toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1340,7 +1338,8 @@ img#wpstats {
|
|||
font-size: 1.857142857rem;
|
||||
line-height: 1.846153846;
|
||||
}
|
||||
.main-navigation .menu {
|
||||
.main-navigation ul.nav-menu,
|
||||
.main-navigation div.nav-menu > ul {
|
||||
border-bottom: 1px solid #ededed;
|
||||
border-top: 1px solid #ededed;
|
||||
display: inline-block !important;
|
||||
|
|
@ -1353,16 +1352,15 @@ img#wpstats {
|
|||
margin: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
.main-navigation li ul li {
|
||||
padding-left: 0;
|
||||
}
|
||||
.main-navigation li a,
|
||||
.main-navigation li {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
.main-navigation li a {
|
||||
border-bottom: 0;
|
||||
color: #6a6a6a;
|
||||
line-height: 3.692307692;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.main-navigation li a:hover {
|
||||
|
|
@ -1373,10 +1371,6 @@ img#wpstats {
|
|||
margin: 0 2.857142857rem 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.main-navigation li a {
|
||||
border-bottom: 0;
|
||||
line-height: 3.692307692;
|
||||
}
|
||||
.main-navigation li ul {
|
||||
display: none;
|
||||
margin: 0;
|
||||
|
|
@ -1386,7 +1380,6 @@ img#wpstats {
|
|||
z-index: 1;
|
||||
}
|
||||
.main-navigation li ul ul {
|
||||
margin-left: 0;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
|
@ -1548,7 +1541,7 @@ img#wpstats {
|
|||
.site-content nav,
|
||||
.widget-area,
|
||||
img.header-image,
|
||||
nav.site-navigation {
|
||||
.main-navigation {
|
||||
display: none;
|
||||
}
|
||||
.wrapper {
|
||||
|
|
|
|||
Loading…
Reference in New Issue