移动菜单 Wordpress CSS 的两个问题

Question

我从博客中复制了一些代码并调整了一些代码以使我在 Wordpress 上的网站的移动菜单全屏显示。我将其设为全屏以供手机和平板电脑查看。但是有两个问题。

1. 当我打开菜单时，我无法关闭菜单，因为关闭按钮和“X”位于菜单覆盖层下方，我尝试了一些有关 z-index 的操作，但没有成功。如何使关闭按钮“X”在菜单打开时始终可见并可点击？

2. 当我打开菜单时，我希望菜单被锁定，这样它就无法向下滚动并查看内容，但是当您打开菜单时，您只能看到菜单而无法向下滚动，除非您关闭菜单。我该如何解决这个问题？

这是平板电脑和手机上的菜单

网站链接->

https://vpwebdesign.disoh.nl/template-b/

我使用的代码：

/* Text left of hamburger in the Theme Builder */
.et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 40px;
z-index: 9999;
}

/* Text left of hamburger in Divi 3 */
#et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
}

/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0px;
}

/* Center-align moble menu items */
.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Make the mobile menu full height */
.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:150px !important;
margin-top:-150px!important;
}

html {
height: -webkit-fill-available;
}

Answer 1

对于您的第一个问题（访问关闭按钮单击），您可以像这样使用指针事件属性：

ul.et_mobile_menu{pointer-evens:none;}
ul.et_mobile_menu li{pointer-evens:all;}

对于另一个问题（不要让正文滚动），您可以在打开/关闭菜单时在正文上添加一个类：

body.menu-open{ position:fixed; }

第二点的难点是找到在“mobile_nav”上附加“关闭/打开”类的点击事件，并在此时编写一个小JS脚本来附加/删除主体上的类，以便可以应用CSS .

通常在 wordpress 上，JS 文件存放在主题或插件文件夹中。

Answer 2

首先，感谢您的回答！

对于您的第一个问题（访问关闭按钮点击），您可以玩 像这样的指针事件属性：

ul.et_mobile_menu{pointer-evens:none;} ul.et_mobile_menu li{pointer-evens:all;}

它确实可以点击，但文本菜单和关闭按钮“X”仍然在菜单下方，我如何让它们更明显以便它们脱颖而出？

对于另一个问题（不要让正文滚动），您可以添加一个 打开/关闭菜单时在 body 上的类：

body.menu-open{ 位置：固定；第二点的难点是 找到在“mobile_nav”上附加“关闭/打开”类的点击事件 并编写一个小 JS 脚本来附加/删除身体上的类 此刻才能应用 CSS。

通常在 wordpress 上，JS 文件存储在主题或插件中 文件夹。

我会试一试，对我来说似乎有点困难，但我会试一试。