Question

我正在尝试使用 html、CSS 和 Javascript 制作响应式菜单，但由于某些问题，当屏幕尺寸减小时，我无法使菜单响应式或汉堡图标。我想在从移动设备上查看时创建汉堡包图标。谁能帮我从我的代码中找出问题。我找不到问题。

foo/bar

Answer 1

Nathan 是对的，你不需要 JS。

首先将此 a.icon {display:none} 添加到您的 css 并像这样更改断点：

@media screen and (max-width: 600px) {
 .navbar a.icon {display: block;}
 .navbar a.icon {
   float: right;
   display: block;
 }
}

@media screen and (max-width: 600px) {
 .navbar {position: relative;}
 .navbar .icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 .navbar .nav-item {
   float: none;
   text-align: left;
   display:none;
 }
}

删除 .responsive 因为这里真的不需要它而是目标 a.icon。 Codepen 可以在 here 中找到。

Answer 2

你真的不需要 JS。


    

    .humbrg {
      display: none
    }

    @media screen and (min-width: 600px) {
      .humbrg {
        display: block
      }
    }


    <div class="humbrg"> </div>

菜单响应问题

2 个答案: