Question

多年来，我一直拒绝学习响应式编码，但是现在我已经达到了必须学习它的地步。使用Flexbox实现布局很容易，但是导航失败。

我想完成以下工作；仅当通过手机访问页面时，才应显示顶部导航。我是通过将PC断点设置为显示来实现的：无。

现在，我想删除实际的水平PC导航，以使移动设备只能使用切换导航。

我该怎么做？

/*nav*/


/* Add a black background color to the top navigation */

.topnav {
  background-color: rgba(24, 32, 37, 0.3);
  overflow: hidden;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Add an active class to highlight the current page */

.active {
  background-color: #555;
  color: white;
}


/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}


/* Dropdown container - needed to position the dropdown content */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(24, 32, 37, 0.7);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Style the links inside the dropdown */

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a dark background on topnav links and the dropdown button on hover */

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}


/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}


/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

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


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

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


/*nav*/

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Part I
            <i class="fa fa-caret-down"></i>
        </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">Part II
            <i class="fa fa-caret-down"></i>
        </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Answer 1

不使用javascript的最快方法是添加以下内容：它也适用于响应式PC导航。

 @media screen and (min-width: 600px) {
      .topnav {
        display: none;
      }
    }


    @media screen and (max-width: 600px) {
      .topnav {
        display: block;
      }

响应式顶部导航仅适用于手机

1 个答案: