Ticket #21562: 21562.css-menu-switch.2.diff
File 21562.css-menu-switch.2.diff, 8.8 KB (added by , 8 years ago) |
---|
-
wp-content/themes/twentytwelve/style.css
508 508 } 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; 600 519 font-size: 12px; … … 602 521 line-height: 2; 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; 610 529 } 530 .main-navigation .menu { 531 display: none; 532 } 611 533 .menu-toggle { 534 clip: auto; 612 535 display: inline-block; 613 } 614 .main-small-navigation .menu { 615 display: none; 536 position: relative !important; 616 537 } 617 538 618 539 /* Banner */ … … 1413 1334 font-size: 1.857142857rem; 1414 1335 line-height: 1.846153846; 1415 1336 } 1337 .main-navigation .menu { 1338 display: inline-block !important; 1339 width: 100%; 1340 font-size: 12px; 1341 font-size: 0.857142857rem; 1342 border-top: 1px solid #ededed; 1343 border-bottom: 1px solid #ededed; 1344 text-align: left; 1345 } 1346 .main-navigation ul { 1347 margin: 0; 1348 text-indent: 0; 1349 } 1350 .main-navigation li ul li { 1351 padding-left: 0; 1352 } 1353 .main-navigation li a, 1354 .main-navigation li { 1355 display: inline-block; 1356 text-decoration: none; 1357 } 1358 .main-navigation li a { 1359 text-transform: uppercase; 1360 color: #6a6a6a; 1361 } 1362 .main-navigation li a:hover { 1363 color: #000; 1364 } 1365 .main-navigation li { 1366 margin: 0 40px 0 0; 1367 margin: 0 2.857142857rem 0 0; 1368 position: relative; 1369 } 1370 .main-navigation li a { 1371 border-bottom: 0; 1372 line-height: 3.692307692; 1373 } 1374 .main-navigation li ul { 1375 display: none; 1376 position: absolute; 1377 top: 100%; 1378 padding: 0; 1379 margin: 0; 1380 z-index: 1; 1381 } 1382 .main-navigation li ul ul { 1383 top: 0; 1384 left: 100%; 1385 } 1386 .main-navigation ul li:hover > ul { 1387 display: block; 1388 border-left: 0; 1389 } 1390 .main-navigation li ul li, 1391 .main-navigation li ul li a { 1392 text-align: center; 1393 } 1394 .main-navigation li ul li a { 1395 background: #efefef; 1396 border-bottom: 1px solid #ededed; 1397 display: block; 1398 font-size: 11px; 1399 font-size: 0.785714286rem; 1400 line-height: 2.181818182; 1401 padding: 8px 10px; 1402 padding: 0.571428571rem 0.714285714rem; 1403 width: 120px; 1404 width: 8.571428571rem; 1405 } 1406 .main-navigation li ul li a:hover { 1407 background: #e3e3e3; 1408 color: #444; 1409 } 1410 .main-navigation .current-menu-item > a, 1411 .main-navigation .current-menu-ancestor > a, 1412 .main-navigation .current_page_item > a, 1413 .main-navigation .current_page_ancestor > a { 1414 color: #636363; 1415 font-weight: bold; 1416 } 1417 .menu-toggle { 1418 clip: rect(1px, 1px, 1px, 1px); 1419 position: absolute !important; 1420 } 1416 1421 .entry-header .entry-title { 1417 1422 font-size: 22px; 1418 1423 font-size: 1.571428571rem; -
wp-content/themes/twentytwelve/functions.php
104 104 * JavaScript for handling navigation menus and the resized 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' ), '20120817', true ); 108 108 109 109 /** 110 110 * Load special font CSS file. -
wp-content/themes/twentytwelve/js/navigation.js
5 5 */ 6 6 7 7 jQuery( document ).ready( function( $ ) { 8 var masthead = $( '#masthead' ), 9 largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ), 10 timeout = false; 11 12 $.fn.smallMenu = function() { 13 if ( ! masthead.find( '.menu' ).children().length ) { 14 $( '.menu-toggle' ).remove(); 15 return; 16 } 8 9 if ( $( '#masthead .menu' ).children().length ) { 10 $( '#masthead h3.assistive-text' ).addClass( 'menu-toggle' ); 11 } 17 12 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 ); 13 $( '.menu-toggle' ).off( 'click' ).click( function() { 14 $( '#masthead .menu' ).stop().slideToggle(); 15 $( this ).toggleClass( 'toggled-on' ); 45 16 } ); 17 46 18 } ); 19 No newline at end of file -
wp-content/themes/twentytwelve/js/theme.js
1 /**2 * navigation.js3 *4 * Handles toggling the navigation menu for small screens.5 */6 7 jQuery( document ).ready( function( $ ) {8 var masthead = $( '#masthead' ),9 largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ),10 timeout = false;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 );45 } );46 } );47 No newline at end of file