我正在使用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' );
} );
}
} );
})();
答案 0 :(得分:0)
您可以使用此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更改