0

我有一个我正在开发的 wordpress 网站，已经有几年的历史了，（但最新的......尽可能多），并使用“Expound”主题。

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

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

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

这是我的 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;
    }
}
4

1 回答 1

0

我使用香草 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样式规则。

于 2018-04-05T02:33:13.620 回答