在 Wordpress 网站上制作媒体导航栏功能

Question

我有一个几年前正在开发的 wordpress 网站（但要保持最新……尽可能多），并使用“Expound”主题。

它应该是响应式的，但导航栏无法正常工作。当显示宽度小于 600 像素时，导航栏菜单会按原样折叠。问题是当您单击折叠的“菜单”时菜单不会扩展。

我只是想知道需要做什么才能在移动设备/较小的屏幕上实际显示该导航栏。

我很乐意提供代码 sn-ps，但我不确定问题出在哪里。

这是我的 reset.css 文件包含的内容（负责折叠操作）：

    /* Small menu */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.main-small-navigation ul {
    display: none;
}

@media screen and (max-width: 600px) {
    .menu-toggle,
    .main-small-navigation ul.nav-menu.toggled-on {
        display: block;
    }

    .navigation-main ul {
        display: none;
    }
}

Answer 1

我使用 vanilla javascript 制作了一个基本的汉堡菜单：

Javascript：

var menu = document.getElementById("menu-fluke-catalog-1")
var toggler = document.querySelectorAll(".menu-toggle")[0];
toggler.addEventListener("click", function (event) {
    if (! menu.classList.value.includes("open")){
        // Menu will open
        menu.classList.add("open");
    } else {
        // Menu will close
        menu.classList.remove("open");
    }
});

CSS：

@media screen and (max-width: 600px) {
    .menu-toggle,
    .main-small-navigation ul.nav-menu.toggled-on {
        display: block;
    }

    .navigation-main ul {
        display: none;
    }
    .navigation-main ul.open {
        display: block;
    }
    /* don't use the next one if you want a more condensed menu*/
    .navigation-main ul.open li {
        display: block;
        width: 100%;
    }
}

检查功能是否适合您，如果您想要更简洁，可以删除.navigation-main ul.open li 样式规则。