Make WordPress Core

Changeset 50115


Ignore:
Timestamp:
01/31/2021 08:09:53 PM (2 years ago)
Author:
joedolson
Message:

Menus: Add sticky footer to avoid duplicate save buttons.

Make the navigation menu footer sticky so a Save Menu button is always available in the viewport. Improves usability and effectiveness of the interface when in a responsive view.

Props garrett-eclipse, audrasjb, maxpertici, sabernhardt, kburgoine, poena
Fixes #51631

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/lib/nav-menu.js

    r50001 r50115  
    13321332    };
    13331333
    1334     $(document).ready(function(){ wpNavMenu.init(); });
     1334    $(document).ready(function() {
     1335
     1336        wpNavMenu.init();
     1337
     1338        // Prevent focused element from being hidden by the sticky footer.
     1339        $( '.menu-edit a, .menu-edit button, .menu-edit input, .menu-edit textarea, .menu-edit select' ).on('focus', function() {
     1340            if ( window.innerWidth >= 783 ) {
     1341                var navMenuHeight = $( '#nav-menu-footer' ).height() + 20;
     1342                var bottomOffset = $(this).offset().top - ( $(window).scrollTop() + $(window).height() - $(this).height() );
     1343
     1344                if ( bottomOffset > 0 ) {
     1345                    bottomOffset = 0;
     1346                }
     1347                bottomOffset = bottomOffset * -1;
     1348
     1349                if( bottomOffset < navMenuHeight ) {
     1350                    var scrollTop = $(document).scrollTop();
     1351                    $(document).scrollTop( scrollTop + ( navMenuHeight - bottomOffset ) );
     1352                }
     1353            }
     1354        });
     1355    });
    13351356
    13361357})(jQuery);
  • trunk/src/wp-admin/css/nav-menus.css

    r50025 r50115  
    892892}
    893893
     894@media only screen and (min-width: 783px) {
     895    @supports ((position: -webkit-sticky) or (position: sticky)) and (scroll-margin-bottom: 130px) {
     896       
     897        #nav-menu-footer {
     898                position: -webkit-sticky;
     899                position: sticky;
     900                bottom: 0;
     901                z-index: 10;
     902                box-shadow: 0 -1px 0 0px #ddd;
     903        }
     904
     905        #save_menu_header {
     906                display: none;
     907        }
     908    }
     909}
     910
    894911@media only screen and (max-width: 768px) {
    895912    /* menu locations */
Note: See TracChangeset for help on using the changeset viewer.