Question

我做了一个小网站菜单：http://website.coathings.nl/（调整窗口大小时看到它）。在桌面上工作正常，但当我点击手机或平板电脑时，我需要消失。我无法弄明白......

当菜单打开并且您单击菜单图标，菜单项或其他位置时，它需要隐藏。当你点击图标（当它关闭时）它需要打开。

Answer 1

您的菜单上有＆＃34;主导航＆＃34;

在CSS https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

中使用媒体查询

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

手机通常在横向模式下的最大宽度为640px。因此，对于纵向和横向模式，媒体查询将起作用。

您可以在移动视图上显示该图标。将单击事件应用于图标说并将菜单的显示属性从无切换到阻止，反之亦然。

    @media only screen and (max-width: 640px) {
.icon{display:block;}
    .main-navigation { display:none }
    }

例如：假设你在点击事件上调用一个函数。检查菜单是隐藏还是可见，并根据您隐藏显示菜单。

function showMenu(){ //using jquery
    if($(".main-navigation").css("display") != "none"){
         $(".main-navigation").css("display","none")
    }else{
         $(".main-navigation").css("display","block");
    }

}

Answer 2

您可以使用CSS媒体查询定位某些设备宽度，以定位平板电脑用户并从那里更改CSS样式。

考虑到这是WP，您最好通过创建子主题并从那里编辑CSS来实现。您可以在wp-content/

中查看自己的主题

点击时隐藏菜单（平板电脑）

2 个答案: