时间戳

首页 > 解决方案 > 仅在移动网站上切换

html - 仅在移动网站上切换

问题描述

我做了一个标题，当有人在桌面上访问该网站时，他会看到一个导航菜单。当同一个人通过手机访问该网站时，他首先会看到一个汉堡菜单。当他点击汉堡菜单时，会有一个动画和一个下拉菜单。

我能够修复此代码，但是当我在我的电脑上访问该网站并单击标题附近时，将出现此移动下拉菜单...

网站;

https://www.spiralex.nl/

我的汉堡包和下拉代码；

function myFunction(x) {
  x.classList.toggle("change");
};
@media (min-width: 768px) {
  .bar1,
  .bar2,
  .bar3 {
    visibility: hidden;
  }
  .onderkant {
    visibility: hidden;
  }
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  top: -72px;
  position: relative;
  background-color: #e7e7e7;
  margin: 6px 0;
  transition: 0.4s;
  left: 15px;
}

.change .onderkant {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 25%, rgba(76, 76, 76, 0.25) 100%);
  backdrop-filter: blur(10px);
  background-color: rgba(76, 76, 76, 0.4);
  height: 180px;
  top: -62px;
  padding-top: 10px;
  position: relative;
  transition: 0.2s;
  visibility: visible;
}

.onderkant {
  visibility: hidden;
}
<div id="Hamburger" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>

  <div class="onderkant">
    <div id="texten">
      <a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjcxNTIiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">
        <h1 id="marktmobile">MARKTEN</h1>
      </a>
      <a href="">
        <h1 id="prodmobile">PRODUCTEN</h1>
      </a>
      <a href="https://www.spiralex.nl/spirapedia/">
        <h1 id="spirmobile">SPIRAPEDIA</h1>
      </a>
      <a href="https://www.spiralex.nl/contact/">
        <h1 id="conmobile">CONTACT</h1>
      </a>
    </div>
  </div>
</div>

标签： htmlcsstoggledropdown

解决方案

尝试

@media (min-width: 768px) {
    .onderkant{
        display: none;
    }
}

推荐阅读