Changeset 21554
- Timestamp:
- 08/20/2012 06:35:33 PM (8 years ago)
- Location:
- trunk/wp-content/themes/twentytwelve
- Files:
-
- 3 edited
- 1 moved
Legend:
- Unmodified
- Added
- Removed
-
trunk/wp-content/themes/twentytwelve/functions.php
r21543 r21554 105 105 * styles for small screen sizes. 106 106 */ 107 wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/ theme.js', array( 'jquery' ), '20120802', true );107 wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120820', true ); 108 108 109 109 /** -
trunk/wp-content/themes/twentytwelve/header.php
r21525 r21554 37 37 38 38 <nav class="site-navigation main-navigation" role="navigation"> 39 <h3 class=" assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>39 <h3 class="menu-toggle"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3> 40 40 <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> 41 41 <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> -
trunk/wp-content/themes/twentytwelve/js/navigation.js
r21553 r21554 6 6 7 7 jQuery( document ).ready( function( $ ) { 8 var masthead = $( '#masthead' ),9 largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ),10 timeout = false;8 if ( $( '#masthead .menu' ).children().length ) { 9 $( '#masthead h3.assistive-text' ).addClass( 'menu-toggle' ); 10 } 11 11 12 $.fn.smallMenu = function() { 13 if ( ! masthead.find( '.menu' ).children().length ) { 14 $( '.menu-toggle' ).remove(); 15 return; 16 } 17 18 masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' ); 19 masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' ); 20 21 $( '.menu-toggle' ).off( 'click' ).click( function() { 22 masthead.find( '.menu' ).stop().slideToggle(); 23 $( this ).toggleClass( 'toggled-on' ); 24 } ); 25 }; 26 27 // Check viewport width on first load. 28 if ( ! largeWindow.matches ) 29 $.fn.smallMenu(); 30 31 // Check viewport width when user resizes the browser window. 32 $( window ).resize( function() { 33 if ( false !== timeout ) 34 clearTimeout( timeout ); 35 36 timeout = setTimeout( function() { 37 if ( ! largeWindow.matches ) { 38 $.fn.smallMenu(); 39 } else { 40 masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' ); 41 masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' ); 42 masthead.find( '.menu' ).removeAttr( 'style' ); 43 } 44 }, 200 ); 12 $( '.menu-toggle' ).off( 'click' ).click( function() { 13 $( '#masthead .menu' ).stop().slideToggle(); 14 $( this ).toggleClass( 'toggled-on' ); 45 15 } ); 46 16 } ); -
trunk/wp-content/themes/twentytwelve/style.css
r21540 r21554 509 509 510 510 /* Navigation Menu */ 511 .main-navigation .menu { 512 display: inline-block; 513 margin-top: 24px; 514 margin-top: 1.714285714rem; 515 width: 100%; 516 font-size: 12px; 517 font-size: 0.857142857rem; 518 border-top: 1px solid #ededed; 519 border-bottom: 1px solid #ededed; 520 } 521 .main-navigation ul { 522 margin: 0; 523 text-indent: 0; 524 } 525 .main-navigation li ul li { 526 padding-left: 0; 527 } 528 .main-navigation li a, 529 .main-navigation li { 530 display: inline-block; 531 text-decoration: none; 532 } 533 .main-navigation li a { 534 text-transform: uppercase; 535 color: #6a6a6a; 536 } 537 .main-navigation li a:hover { 538 color: #000; 539 } 540 .main-navigation li { 541 margin-right: 40px; 542 margin-right: 2.857142857rem; 543 position: relative; 544 } 545 .main-navigation li a { 546 border-bottom: 0; 547 line-height: 3.692307692; 548 } 549 .main-navigation li ul { 550 display: none; 551 position: absolute; 552 top: 100%; 553 padding: 0; 554 margin: 0; 555 z-index: 1; 556 } 557 .main-navigation li ul ul { 558 top: 0; 559 left: 100%; 560 } 561 .main-navigation ul li:hover > ul { 562 display: block; 563 border-left: 0; 564 } 565 .main-navigation li ul li, 566 .main-navigation li ul li a { 567 text-align: center; 568 } 569 .main-navigation li ul li a { 570 background: #efefef; 571 border-bottom: 1px solid #ededed; 572 display: block; 573 font-size: 11px; 574 font-size: 0.785714286rem; 575 line-height: 2.181818182; 576 padding: 8px 10px; 577 padding: 0.571428571rem 0.714285714rem; 578 width: 120px; 579 width: 8.571428571rem; 580 } 581 .main-navigation li ul li a:hover { 582 background: #e3e3e3; 583 color: #444; 584 } 585 .main-navigation .current-menu-item > a, 586 .main-navigation .current-menu-ancestor > a, 587 .main-navigation .current_page_item > a, 588 .main-navigation .current_page_ancestor > a { 589 color: #636363; 590 font-weight: bold; 591 } 592 nav[role="navigation"].main-small-navigation { 511 .main-navigation { 593 512 margin-top: 24px; 594 513 margin-top: 1.714285714rem; 595 514 text-align: center; 596 515 } 597 nav[role="navigation"].main-small-navigation li {516 .main-navigation li { 598 517 margin-top: 24px; 599 518 margin-top: 1.714285714rem; … … 603 522 float: none; 604 523 } 605 nav[role="navigation"].main-small-navigation a {524 .main-navigation a { 606 525 color: #5e5e5e; 607 526 } 608 nav[role="navigation"].main-small-navigation a:hover {527 .main-navigation a:hover { 609 528 color: #21759b; 529 } 530 .main-navigation .menu { 531 display: none; 610 532 } 611 533 .menu-toggle { 612 534 display: inline-block; 613 }614 .main-small-navigation .menu {615 display: none;616 535 } 617 536 … … 1414 1333 line-height: 1.846153846; 1415 1334 } 1335 .main-navigation .menu { 1336 border-bottom: 1px solid #ededed; 1337 border-top: 1px solid #ededed; 1338 display: inline-block !important; 1339 font-size: 12px; 1340 font-size: 0.857142857rem; 1341 text-align: left; 1342 width: 100%; 1343 } 1344 .main-navigation ul { 1345 margin: 0; 1346 text-indent: 0; 1347 } 1348 .main-navigation li ul li { 1349 padding-left: 0; 1350 } 1351 .main-navigation li a, 1352 .main-navigation li { 1353 display: inline-block; 1354 text-decoration: none; 1355 } 1356 .main-navigation li a { 1357 color: #6a6a6a; 1358 text-transform: uppercase; 1359 } 1360 .main-navigation li a:hover { 1361 color: #000; 1362 } 1363 .main-navigation li { 1364 margin: 0 40px 0 0; 1365 margin: 0 2.857142857rem 0 0; 1366 position: relative; 1367 } 1368 .main-navigation li a { 1369 border-bottom: 0; 1370 line-height: 3.692307692; 1371 } 1372 .main-navigation li ul { 1373 display: none; 1374 margin: 0; 1375 padding: 0; 1376 position: absolute; 1377 top: 100%; 1378 z-index: 1; 1379 } 1380 .main-navigation li ul ul { 1381 top: 0; 1382 left: 100%; 1383 } 1384 .main-navigation ul li:hover > ul { 1385 border-left: 0; 1386 display: block; 1387 } 1388 .main-navigation li ul li a { 1389 background: #efefef; 1390 border-bottom: 1px solid #ededed; 1391 display: block; 1392 font-size: 11px; 1393 font-size: 0.785714286rem; 1394 line-height: 2.181818182; 1395 padding: 8px 10px; 1396 padding: 0.571428571rem 0.714285714rem; 1397 width: 120px; 1398 width: 8.571428571rem; 1399 } 1400 .main-navigation li ul li a:hover { 1401 background: #e3e3e3; 1402 color: #444; 1403 } 1404 .main-navigation .current-menu-item > a, 1405 .main-navigation .current-menu-ancestor > a, 1406 .main-navigation .current_page_item > a, 1407 .main-navigation .current_page_ancestor > a { 1408 color: #636363; 1409 font-weight: bold; 1410 } 1411 .menu-toggle { 1412 display: none; 1413 } 1416 1414 .entry-header .entry-title { 1417 1415 font-size: 22px;
Note: See TracChangeset
for help on using the changeset viewer.