html - 调整特定宽度的大小时，如何使左侧边栏响应顶部导航栏

Question

这就是我的代码的样子

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

body {
  padding-top: 5px;
  background: #efefef;
  color: #000;
  font: 10pt/18pt Arial, sans-serif;
  border-top: 6px;
}

#navbar {
  max-width: 928px;
  font-size: 22px;
  background: #FFF;
  box-shadow: 0 0 20px #CCC;
  border: 1px solid #ccc;
  zoom: 1;
  margin: 0 auto 10px;
  padding: 10px;
  font-size: 2em;
  font-weight: bold;
  background-color: #4596d8;
  margin-bottom: -4px;
}

#content {
  display: flex;
  max-width: 946px;
  background: #FFF;
  box-shadow: 0 0 20px #CCC;
  border: 1px solid #ccc;
  zoom: 1;
  margin: 0 auto 10px;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: -4px;
  background: #FFF;
}

#leftsidebar {
  width: 200px;
  border-right: 2px solid #4596d8;
}

#leftsidebar ui a {
  display: block;
  font-size: 18px;
  color: black;
  width: 100%;
  padding-left: 10px;
  padding-top: 10px;
  box-sizing: border-box;
  border-top: 1px solid red rgba(255, 255, 255, .1);
  border-bottom: solid 1px;
  text-decoration: none;
}

#leftsidebar ui a:hover {
  background-color: #4596d8;
}

#maincontent {
  width: 728px;
  padding: 10px;
  padding-top: 5px;
  font: 10pt/18pt Arial, sans-serif;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  border-width: 6px;
}

div {
  display: block;
}

#container {
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0;
  padding: 0;
}

table {
  margin-left: 20%;
  margin-right: 20%;
  border: 1px solid #4596d8;
}

form {
  margin-left: 0 auto;
  margin-right: 0 auto;
}

#footer {
  text-align: center;
  margin: 0 auto;
}

.form-inline {
  flex-direction: column;
  align-items: stretch;
}

@media screen and (max-width: 600px) {
  .leftsidebar a:not(:first-child) {
    display: none;
  }
  .leftsidebar a.icon {
    float: right;
    display: block;
  }
}

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

<div id="navbar">
  MySite
</div>

<div id="content">
  <div id="leftsidebar">
    <ui>
      <a href="index.html" class="w3-bar-item w3-button">Site1</a>
      <a href="site2.html" class="w3-bar-item w3-button">Site2</a>
      <a href="site3.html" class="w3-bar-item w3-button">Site3</a>
      <a href="site4.html" class="w3-bar-item w3-button">Site4/a>
            <a href="site5.html" class="w3-bar-item w3-button">Site5</a>
    </ui>
  </div>

当我调整网站大小时，一切都保持不变，没有任何变化。我改变了很多次线路，但没有任何改变。除了这个问题，其他一切我都可以自己解决。

我的代码来自这个例子。与示例站点的唯一区别是，我的网站导航栏位于左侧，而我的徽标位于顶部导航栏中。因此，当我调整它的大小或在某个宽度上时，菜单元素位于隐藏在图标后面的导航栏中。

标签： htmlcss

Answer 1

您在哪里使用.leftsidebar选择器（类选择器）而不是#leftsidebarID 选择器。该元素没有类，因此您必须使用#leftsidebar

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

body {
  padding-top: 5px;
  background: #efefef;
  color: #000;
  font: 10pt/18pt Arial, sans-serif;
  border-top: 6px;
}

#navbar {
  max-width: 928px;
  font-size: 22px;
  background: #FFF;
  box-shadow: 0 0 20px #CCC;
  border: 1px solid #ccc;
  zoom: 1;
  margin: 0 auto 10px;
  padding: 10px;
  font-size: 2em;
  font-weight: bold;
  background-color: #4596d8;
  margin-bottom: -4px;
}

#content {
  display: flex;
  max-width: 946px;
  background: #FFF;
  box-shadow: 0 0 20px #CCC;
  border: 1px solid #ccc;
  zoom: 1;
  margin: 0 auto 10px;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: -4px;
  background: #FFF;
}

#leftsidebar {
  width: 200px;
  border-right: 2px solid #4596d8;
}

#leftsidebar ui a {
  display: block;
  font-size: 18px;
  color: black;
  width: 100%;
  padding-left: 10px;
  padding-top: 10px;
  box-sizing: border-box;
  border-top: 1px solid red rgba(255, 255, 255, .1);
  border-bottom: solid 1px;
  text-decoration: none;
}

#leftsidebar ui a:hover {
  background-color: #4596d8;
}

#maincontent {
  width: 728px;
  padding: 10px;
  padding-top: 5px;
  font: 10pt/18pt Arial, sans-serif;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  border-width: 6px;
}

div {
  display: block;
}

#container {
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0;
  padding: 0;
}

table {
  margin-left: 20%;
  margin-right: 20%;
  border: 1px solid #4596d8;
}

form {
  margin-left: 0 auto;
  margin-right: 0 auto;
}

#footer {
  text-align: center;
  margin: 0 auto;
}

.form-inline {
  flex-direction: column;
  align-items: stretch;
}

@media screen and (max-width: 600px) {
  #leftsidebar a:not(:first-child) {
    display: none;
  }
  #leftsidebar a.icon {
    float: right;
    display: block;
  }
}

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

<div id="navbar">
  MySite
</div>

<div id="content">
  <div id="leftsidebar">
    <ui>
      <a href="index.html" class="w3-bar-item w3-button">Site1</a>
      <a href="site2.html" class="w3-bar-item w3-button">Site2</a>
      <a href="site3.html" class="w3-bar-item w3-button">Site3</a>
      <a href="site4.html" class="w3-bar-item w3-button">Site4/a>
            <a href="site5.html" class="w3-bar-item w3-button">Site5</a>
    </ui>
  </div>