Question

我已经在我的页面中添加了媒体查询，因此当您在移动设备上查看时，您会收到响应式的汉堡＆＃39;菜单看到导航。

响应式菜单似乎工作正常，但我最终迷失了，并且在我的CSS中迷失了如何将响应式菜单显示在移动设备上，就像它在桌面上显示一样。

导航的类设置为nav-collapse。 Here's the live URL我暂时发布，但使用的CSS如下： -

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 550px;
  float: right;
  margin: 10px 20px 0 0;
}

.nav-collapse li {
  float: left;
  width: 100%;
}

.nav-collapse a {
  color: #000;
  text-decoration: none;
  width: 100%;
  background: #f7d223;
  font-family: 'DINLightRegular', Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  padding: 0.7em 1em;
  float: left;
}


.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
}

@media only screen and (max-width: 640px) {
  .nav-collapse li {
    width: 25%;
    *width: 24.9%; /* IE7 Hack */
    _width: 19%; /* IE6 Hack */
  }
  .nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 530px;
  margin: 16px 10px 0 10px;
}
.nav-collapse a {
margin: 0;
padding: 1em;
float: left;
text-align: center;
border-bottom: 0;
  }
      .nav-collapse ul ul a {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 340px;
  margin: 16px 10px 0 10px;
}
}

如何在此CSS中的桌面上的移动和标准导航中显示汉堡菜单？

Answer 1

正如Huangism所述，实现此目的最常用的方法是默认使用规则display: none隐藏桌面/平板电脑。

然后，当您的媒体查询处于特定尺寸的活动状态时，请根据您的情况更改为display:block或内嵌，内联阻止等。

目前尚不清楚他的导航崩溃规则是什么意图。显示的规则中存在冲突。

display:规则的简单更改将根据需要显示/隐藏。

媒体查询无法在桌面上显示导航

1 个答案: