下拉菜单”aria”仅在714px Bootstrap WordPress主题以下起作用

我正在使用Wordpress”店面”的子主题构建自定义网站, 但移动引导NAV切换存在很大问题。

使用”菜单”切换响应菜单时, 它不会显示870像素宽的下拉菜单, 而只会显示714像素宽的下拉菜单。我一直在尝试解决此问题, 但是没有成功, 我唯一注意到的是切换上的按钮类。如果你在代码检查器中查看, 则aria-expanded =” false”的宽度大约为870px, 如果我手动输入代码, 则值为” true”, 因此读取aria-expanded =” true”即可正常工作。

非常感谢我一直在尝试解决几个小时的问题, 但是在纠正方面没有成功。下方的Web链接是右上方的移动主导航菜单

https://tiltrak.com/webdev/

#1

aria-expanded是向屏幕阅读器提示有关元素用途的提示。它不提供任何行为。通常, 是否设置该属性对网站的工作方式没有影响。

但是, 由于ARIA属性与其他任何html属性一样, 因此你可以基于属性的值在CSS中添加条件逻辑, 并且如果该条件逻辑隐藏或取消隐藏元素, 则可能会影响你网站的外观。

在这种情况下,

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Navigation">
  <button class="menu-toggle" aria-controls="site-navigation" aria-expanded="false"><span>Menu</span></button>
  <div class="primary-navigation">
    ...
  </div>
  <div class="handheld-navigation">
    <ul id="menu-mobile-main-navigation" class="menu">
    ...
  </div>

当单击按钮时切换aria-expanded时, 以下CSS起作用：

.main-navigation.toggled .handheld-navigation, .main-navigation.toggled .menu>ul:not(.nav-menu), .main-navigation.toggled ul[aria-expanded="true"] {
  max-height: 9999px;
}

但这有点像鲱鱼。是的, 在CSS中有一个aria扩展名, 但是在<ul>上, 并且<ul>没有扩展, 菜单按钮是。但是, 当选择按钮时, 主<nav>中添加了”切换”类。它从

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Navigation">

to

<nav id="site-navigation" class="main-navigation toggled" role="navigation" aria-label="Primary Navigation">

这会导致具有子菜单的<div>具有最大高度, 从而使其显示出来。

但是主要的问题是

<div class="primary-navigation">...</div>
<div class="handheld-navigation">...</div>

这些<div>元素中只有一个是可见的, 并且如果类名是一个线索, 则第一个元素应该在台式设备上可见, 而第二个元素在移动设备上应该可见。但是, 当我在firefox上尝试你的示例URL, 然后按ctrl + shift + M打开移动模拟器并将设备设置为” iphone X”并将其放置在横向时, 我得到了812px宽的显示和”主导航”可见, 并且手持设备处于隐藏状态。我认为这就是问题所在。

如果我切换到” iPhone X”但处于纵向模式, 则宽度为375px, 可以正常使用。

你可能对<link media =” screen and(min-width：500px)” …>有问题。 (这只是一个示例数字, 为500像素, 我并不是说这就是你使用的数字。)

查找两个<div>主导航和手持导航的初始化位置, 以及其中一个如何显示：无设置。