Question

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

它应该是响应式的，但导航栏无法正常运行。当显示器宽度小于600px时，导航栏菜单会崩溃，应该如此。问题是当您单击折叠的“菜单”时菜单不会延伸。

我只是想知道在移动设备/小屏幕上实际显示导航条需要做些什么。

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

这是我的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样式规则。

在Wordpress网站上使媒体导航栏功能正常

1 个答案: