如何解决移动菜单 Wordpress CSS 的两个问题
我从博客中复制了一些代码并调整了一些代码,以使我在 Wordpress 上的网站的移动菜单全屏显示。我为手机和平板电脑视图做了全屏。但是有两个问题。
-
当我打开菜单时,我无法关闭菜单,因为关闭按钮和“X”位于菜单叠加层下方,我尝试使用 z-index 进行了一些操作,但没有奏效出去。如何在菜单打开时使关闭按钮“X”始终可见且可点击?
-
当我打开菜单时,我希望菜单被锁定,这样它就无法向下滚动并查看内容,但是当您打开菜单时,您只能看到菜单而无法向下滚动除非你关闭菜单。我该如何解决这个问题?
这是平板电脑和手机上的菜单
网站链接->
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;
}
解决方法
对于您的第一个问题(访问关闭按钮单击),您可以使用指针事件属性,如下所示:
ul.et_mobile_menu{pointer-evens:none;}
ul.et_mobile_menu li{pointer-evens:all;}
对于另一个问题(不要让身体滚动),您可以在打开/关闭菜单时在身体上添加一个类:
body.menu-open{ position:fixed; }
第二点的难点是找到在“mobile_nav”上附加“closed/opened”类的点击事件,并编写一个小JS脚本来在此时附加/删除body上的类,以便可以应用CSS .
通常在 wordpress 上,JS 文件存放在主题或插件文件夹中。
,首先,感谢您的回答!
对于你的第一个问题(访问关闭按钮点击),你可以玩 使用像这样的指针事件属性:
ul.et_mobile_menu{pointer-evens:none;} ul.et_mobile_menu li{pointer-evens:all;}
它可以让它可点击,但文本菜单和关闭按钮“X”仍然在视觉上位于菜单下方,我如何让它们更显眼,以便它们脱颖而出?
对于另一个问题(不要让身体滚动),你可以添加一个 打开/关闭菜单时在身体上的类:
body.menu-open{ 位置:固定;第二点的难点是 在“mobile_nav”上找到附加“关闭/打开”类的点击事件 并编写一个小 JS 脚本来附加/删除主体上的类 此时可以应用 CSS。
通常在 wordpress 上,JS 文件存放在主题或插件中 文件夹。
我会尝试一下,对我来说似乎有点困难,但我会尝试一下。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。