Javascript 在移动设备上激活切换菜单时，更改标题css

我正在我的WP网站的切换菜单上工作。我使用的主题没有给我任何定制的可能性，所以我继续自己定制。我想要的是，当手机点击菜单时，整个页面变暗，并从左侧打开菜单项，如下所示：

但我知道我必须对js文件进行更改，这在涉及WP时让我感到困扰。 这是我的网站：

下面是js代码：

( function() {
// Wait for DOM to be ready.
document.addEventListener( 'DOMContentLoaded', function() {
    var container = document.getElementById( 'site-navigation' );
    if ( !container ) {
        return;
    }

    var button = container.querySelector( 'button' );
    if ( !button ) {
        return;
    }

    var menu = container.querySelector( 'ul' );
    // Hide menu toggle button if menu is empty and return early.
    if ( !menu ) {
        button.style.display = 'none';
        return;
    }

    button.setAttribute( 'aria-expanded', 'false' );
    menu.setAttribute( 'aria-expanded', 'false' );
    menu.classList.add( 'nav-menu' );

    button.addEventListener( 'click', function() {
        container.classList.toggle( 'toggled' );
        var expanded = container.classList.contains( 'toggled' ) ? 'true' : 'false';
        button.setAttribute( 'aria-expanded', expanded );
        menu.setAttribute( 'aria-expanded', expanded );
    } );

    // Add class to footer search when clicked.
    document.querySelectorAll( '.storefront-handheld-footer-bar .search > a' ).forEach( function( anchor ) {
        anchor.addEventListener( 'click', function( event ) {
            anchor.parentElement.classList.toggle( 'active' );
            event.preventDefault();
        } );
    } );

    // Add focus class to parents of sub-menu anchors.
    document.querySelectorAll( '.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a' ).forEach( function( anchor ) {
        var li = anchor.parentNode;
        anchor.addEventListener( 'focus', function() {
            li.classList.add( 'focus' );
        } );
        anchor.addEventListener( 'blur', function() {
            li.classList.remove( 'focus' );
        } );
    } );

    // Add an identifying class to dropdowns when on a touch device
    // This is required to switch the dropdown hiding method from a negative `left` value to `display: none`.
    if ( ( 'ontouchstart' in window || navigator.maxTouchPoints ) && window.innerWidth > 767 ) {
        document.querySelectorAll( '.site-header ul ul, .site-header-cart .widget_shopping_cart' ).forEach( function( element ) {
            element.classList.add( 'sub-menu--is-touch-device' );
        } );
    }
} );

---

}）（）

您可以使用此CSS作为起点

.main-navigation.toggled div.menu:last-child {
    /*display:block;*/
    background-color: #000;
    color: #fff;
    left: 0;
    top: 0;
    width: 60%;
    padding: 0 10px;
    height: 100%;
    overflow: auto;
    opacity:1;
    z-index: 99;
    transition: 0.5s ease-in-out all;
}
.main-navigation div.menu:last-child{
    /*display:none;*/
    opacity: 0;
    left:-60%;
    position: fixed;
}

.main-navigation.toggled div.menu:last-child a {
    color: #fff;
    padding: 6px 0;
}

您可以将此css粘贴到custom.css或style.css文件中，并检查您是否不需要更改任何html及其所有css更改

---

感谢您的回复！这对我很管用！嗨，我知道它已经有一年多的历史了，但如果它对你有用的话，最好是升级投票或选择验证答案。干杯