Question

侧面板代码：

<div class="sidenav" id="sidebar">
    <div class="sideheader">
    <a><img src="Dashboard_dark.svg" class="sidepanel">DashBoard</a>
    </div>
    <div class="sideheader">
    <a href="issues.html" target="_self"><img src="Issues_dark.svg"class="sidepanel">Issues</a>
    </div>
    <div class="sideheader">
    <a href="create.html" target="_self"><img src="Create_dark.svg" class="sidepanel">Create</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()"></a>
    <i class="fa fa-bars"></i>
  </div>
</div>

JS代码：

<script type="text/javascript">
  function myFunction() {
  var x = document.getElementById("sidebar");
  if (x.className === "sidenav") {
    x.className += " responsive";
  } else {
    x.className = "sidenav";
  }
}
</script>

CSS 代码：

    .sidenav {
  margin-top: 59px;
  width: 192.5px;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1D1F37;
  padding-top: 20px;
  align-items: center;
  position: fixed;
  height: 100%;
  border-top: 1px solid gray;
  align-self:stretch;
  background-color: #1D1F37;

}
.sidenav a {
  padding: 6px 8px 20px 16px;
  text-decoration: none;
  font-size: 17px;
  color: #818181;
  display: block;
}
    @media screen and (max-width: 600px) {
  .sidenav a:not(:first-child) {display: none;}
  .sidenav a.icon {
    float: right;
    display: block;
  }
}

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

所以，我想在侧面板上创建一个汉堡菜单。当屏幕尺寸降到 600 像素时，我希望用户看到汉堡菜单而不是完整的侧面板。但是，我的代码不起作用。我正在处理的代码附在此处。请帮帮我。

Answer 1

1 - 您的 html 源代码没有类 .topnav 的标签，但您在媒体查询中指定了此类。我用这个类创建了一个 div，使它成为主要的。

2 - 标签 </a> 没有关闭标签 <a>。此标记已从 lassmo .topnav 移至标记。

3 - 您使用相同的断点指定不同的媒体查询 - max-width: 600px。我将它们合并为一个媒体查询。

4 - 将此添加到您的 css：

.topnav a.icon {
    display: none;
}

5 - 默认情况下，我使用 .sidenav 规则隐藏了 left: -100%，但在添加类后，我添加了 left: 0 规则（以显示 .sidenav）。< /p>

6 - 此外，媒体查询中的类也存在混淆。您为 responsive 添加了一个 .topnav 类，但您需要为 .sidenav 添加这个类。

7 - 并在媒体查询中从 position: relative 中删除了 .sidenav.responsive。

function myFunction() {
    var x = document.getElementById("sidebar");
    if (x.className === "sidenav") {
        x.className += " responsive";
    } else {
        x.className = "sidenav";
    }
}

.sidenav {
    /*margin-top: 59px;*/
    width: 192.5px;
    z-index: 1;
    top: 0;
    left: -100%;
    background-color: #1d1f37;
    padding-top: 20px;
    align-items: center;
    position: fixed;
    height: 100%;
    border-top: 1px solid gray;
    align-self: stretch;
    background-color: #1d1f37;
}

.sidenav a {
    padding: 6px 8px 20px 16px;
    text-decoration: none;
    font-size: 17px;
    color: #818181;
    display: block;
}

.topnav a.icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .sidenav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .sidenav.responsive {
        /*position: relative;*/
        left: 0;
    }

    .sidenav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .sidenav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

<div class="topnav">
    <div class="sidenav" id="sidebar">
        <div class="sideheader">
            <a><img src="Dashboard_dark.svg" class="sidepanel" />DashBoard</a>
        </div>
        <div class="sideheader">
            <a href="issues.html" target="_self"><img src="Issues_dark.svg" class="sidepanel" />Issues</a>
        </div>
        <div class="sideheader">
            <a href="create.html" target="_self"><img src="Create_dark.svg" class="sidepanel" />Create</a>
        </div>
    </div>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i>TOGGLE </a>
</div>

侧面板上的汉堡菜单

1 个答案: