html - 动态地使垂直导航栏在屏幕调整大小时变为水平

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;
    }
}

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

编辑:

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;
  }
}

<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>

Answer 1

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

在您的媒体查询中，您需要将导航元素和 Logo 的显示属性设置为内联，以便它们并排显示。 (您也可以考虑为此使用 flexbox)您还需要重置一些更高层定义的属性，例如 h3 Logo 元素的行高。

@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;
  }
}