javascript - 当移动更改标题 css 上的事件切换菜单时

Question

我正在处理我的 WP 网站的切换菜单。我使用的主题没有给我任何定制它的可能性，所以我继续自己定制它。问题是我想要在手机上单击菜单以使整个页面变暗并从左侧打开菜单项，如下所示: https://cdn3.wpbeginner.com/wp-content/uploads/2016/09/responsivemenudemo-1.gif

但我知道我必须对 js 文件进行更改，这在涉及 WP 时困扰着我。这是我的网站: https://www.ngraveme.com/bg/

这是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' );
        } );
    }
} );

} )();

Answer 1

您可以使用此 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 更改