动态地使垂直导航栏在屏幕上调整大小

Question

我正在尝试创建动态导航栏。默认情况下，我希望导航栏垂直显示在跨越页面整个高度的div中，但是在调整大小时，我希望栏变为水平。这是我想要实现的目标的图片：

我试图在W3Schools suggestions之后根据我display:block;添加ul来塑造我的方法，但它并没有改变任何东西。我对媒体查询的理解并不是最好的，但我也尝试改变左边div（深灰色）的宽度和高度：

@media screen and (max-width: 200px) {
    .nav-container{
        width: 100%;
        height: 200px;
        background-color: #333;
        border-bottom: 0.5px solid #333;
    }
}

实现这一目标的最佳方法是什么？

修改：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  background-color: #fff;
}

body {
  background-color: #fff;
  text-align: center;
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  display: block;
}

.site-wrapper {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

* {
  margin: 0;
  padding: 0;
}

.site-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.nav-container {
  height: 100%;
  width: 200px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-holder {
  position: absolute;
  top: 0;
  text-align: center;
}

.logo-holder img {
  height: auto;
}

#navigation-div {
  margin-top: -300px;
  width: 100%;
}

.nav-ul li a {
  display: block;
}

.nav-link {
  width: 100%;
  display: block;
  text-align: left;
  color: #fff;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #fff;
  color: #333;
}

.nav ul {
  width: 100%;
  padding-left: 0px;
}

.nav ul li {
  list-style-type: none;
  width: 100%;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  margin-left: 15px;
}

.nav li:hover {
  background-color: #fff;
}

.nav li:hover a {
  color: #333;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 160px;
    background-color: #333;
    border-bottom: 0.5px solid #333;
  }
  .nav-container nav,
  .nav-container nav ul,
  .nav-container nav ul li,
  .logo-holder {
    display: inline;
  }
  .logo-holder {
    position: absolute;
    left: 0;
  }
  #navigation-div {
    float: left;
  }
}

＆＃13;

<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img src="#" alt="Logo" />
    </div>
    <div id="navigation-div">
      <nav class="nav left-nav-bar">
        <ul class="nav-ul">
          <a class="nav-link active" href="">
            <li>Home</li>
          </a>
          <a class="nav-link" href="">
            <li>Blog</li>
          </a>
          <a class="nav-link" href="">
            <li>Store</li>
          </a>
          <a class="nav-link" href="">
            <li>Contact</li>
          </a>
        </ul>
      </nav>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，您的媒体查询可能根本没有被调用，因为最大宽度非常小，为200px。

在媒体查询中，您需要将导航元素的显示属性和徽标设置为内联，以便它们并排显示。 （你也可以考虑使用flexbox）你还需要重置一些更高级别的属性，比如h3徽标元素的行高。

@media screen and (max-width: 480px) {
  .nav-container{
      width: 100%;
      height: auto;
      background-color: #333;
      border-bottom: 0.5px solid #333;
   }
  .nav-container nav,
  .nav-container nav ul,
  .nav-container nav ul li,
  .logo-holder,
  .logo-holder h3 {
      display: inline;
  }
  .logo-holder h3 {
      line-height: 1;
  }
}