html - 移动菜单 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;
}
解决方案
对于您的第一个问题(访问关闭按钮单击),您可以使用 pointer-events 属性,如下所示:
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 文件存放在主题或插件文件夹中。
推荐阅读
- shell - 如何只用一个命令执行一堆makefile?或者如何编写我的makefile?
- database - Angular + Firestore,如何做这个 CRUD 系统?
- ssis - SSIS DTS_E_INDUCEDTRANSFORMFAILUREONERROR
- sql-server - 如何选择行的总和
- loops - 用于在列中设置值的 Google 表格脚本
- python - ValueError: pos_label=1 不是有效标签:array(['neg', 'pos'], dtype='
我在尝试获取召回分数时收到此错误。
X_test = test_pos_vec + test_neg_vec Y_test = ["pos"] * len(test_pos_vec) + ["neg"] * len(test_neg_vec) recall_average = recall_
- android - 如何以编程方式启动应用程序详细信息?
- c - C程序计算字符串中字符的出现次数
- c# - WPF 的 PasswordBox 中的 SecureString 与手动构建的不同
- c# - Unity2D射击目标以随机颜色匹配 - C#