响应式横幅 CSS/HTML

Question

我正在尝试使我的标题/横幅（最终将输入到 SharePoint 母版页）响应。我为标题设置了高度，通常如果我要做出任何响应，我将高度设置为自动。

我正在使用 flex 将信息包含在横幅中。当我切换设备仿真并缩小窗口时，标题向右推并最终与右侧的图像一起隐藏。

我想这样做，以便当视口缩小到足够小时，所有标题都包含在手风琴的线条中，或者创建我自己的按钮（下拉菜单），其样式与手风琴的样式相同。我需要使用 :before 还是 :after。

类似这样的东西（在小视口中包含所有标题/锚点）：

这是我原来的 sn-p & Fiddle:

body {
              font-family: Arial, Helvetica, sans-serif;
            }
            .armylogo{
                float: left;
                justify-content: center;
                height: 95%;
                bottom: 0;
                width: auto;
                vertical-align: baseline;
            }
             .armylogo2{
                float: right;
                justify-content: center;
                height: 95%;
                bottom: 0;
                width: auto;
                vertical-align: baseline;
            }
            .navbar {
              overflow: hidden;
              background-color: #104723;
              height: 94px;
              width: 100%;
              text-align: right;
              float: left;
              display: flex;
              align-items: center;
              justify-content: space-between;
                  flex-wrap: wrap;

            }
            
            .navbar a {
              float: left;
              font-size: 16px;
              color: white;
              text-align: center;
              padding: 14px 16px;
              text-decoration: none;
              vertical-align: center;
            }

            .dropdown {
              float: left;
              overflow: hidden;
              vertical-align: center;
            }
            
            .dropdown .dropbtn {
              font-size: 16px;  
              border: none;
              outline: none;
              color: white;
              padding: 14px 16px;
              background-color: inherit;
              font-family: inherit;
              margin: 0;
            }
            
            .navbar a:hover, .dropdown:hover .dropbtn {
              background-color: #104723;
            }
            
            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }
            
            .dropdown-content a {
              float: none;
              color: black;
              padding: 12px 16px;
              text-decoration: none;
              display: block;
              text-align: left;
            }
            
            .dropdown-content a:hover {
              background-color: #ddd;
            }
            
            .dropdown:hover .dropdown-content {
              display: block;
            }

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#test1">Test 1</a>
    <a href="#test2">Test 2</a>
  <a href="#test3">Test 3</a>

  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <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> 
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/>
</div>

这是来自答案的更新版本（仍然不起作用）

.navbar {
  /* overflow: hidden; */ /* not needed */
  background-color: #104723;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */
}

.armylogo,
.armylogo2 {
  height: 95%;
  /* bottom: 0;  they should just sit in space */
  padding: 0 2px; /* keep logo from touching edge */
  width: auto;
}

.navbar a {
  font-size: 16px;
  color: #fff; /* use one type of color values */
  padding: 14px 16px;
  text-decoration: none;
}
body {
              font-family: Arial, Helvetica, sans-serif;
            }
 @media only screen and (max-width: 600px) {
      .newDiv {
              width:50%;
              display:flex;
              flex-wrap:wrap;
          }
    }


.navbar a {
  font-size: 16px;
  color: #fff; /* use one type of color values */
  padding: 14px 16px;
  text-decoration: none;
}
            
            .navbar a {
              float: left;
              font-size: 16px;
              color: white;
              text-align: center;
              padding: 14px 16px;
              text-decoration: none;
              vertical-align: center;
            }

            .dropdown {
              float: left;
              overflow: hidden;
              vertical-align: center;
            }
            
            .dropdown .dropbtn {
              font-size: 16px;  
              border: none;
              outline: none;
              color: white;
              padding: 14px 16px;
              background-color: inherit;
              font-family: inherit;
              margin: 0;
            }
            
            .navbar a:hover, .dropdown:hover .dropbtn {
              background-color: #104723;
            }
            
            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }
            
            .dropdown-content a {
              float: none;
              color: black;
              padding: 12px 16px;
              text-decoration: none;
              display: block;
              text-align: left;
            }
            
            .dropdown-content a:hover {
              background-color: #ddd;
            }
            
            .dropdown:hover .dropdown-content {
              display: block;
            }

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/>
<div class="newDiv">

  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#test1">Test 1</a>
    <a href="#test2">Test 2</a>
  <a href="#test3">Test 3</a>

  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <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> 
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/>
</div>

Answer 1

您可以将组件的这一部分包装在一个 div 中，然后您可以在媒体查询中将此属性赋予该 div。

      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#test1">Test 1</a>
      <a href="#test2">Test 2</a>
      <a href="#test3">Test 3</a>
    
      <div class="dropdown">
        <button class="dropbtn">Dropdown 
          <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>

此外，对于您的 a 元素和 .dropdown，您应该在媒体查询中给出 width:%50 那么它们总共将是 3 行和 2 列。当然，您也可以在媒体查询中更改字体大小或其他功能。

@media only screen and (max-width: 600px) {
      .newDiv {
              width:100%;
              display:flex;
              flex-wrap:wrap;
          }
    }

  

Answer 2

同意@EvrenK 的方法。关于::before 和::after 伪元素需要注意的一点是您不能附加事件。所以真正有样式的按钮将是最好的方法，也是最好的语义。

有点离题，但注意到关于您的样本的一些一般情况。一种可能会有所帮助的做法是将您的选择器分组，而且您还有一些额外的声明。 Flexbox 应该几乎可以为您购买此导航所需的一切。所以没有floating。

CSS 往往有点冗长，去除多余的东西通常会使它更具可读性/不那么令人头疼。

.navbar {
  /* overflow: hidden; */ /* not needed */
  background-color: #104723;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */
}

.armylogo,
.armylogo2 {
  height: 95%;
  /* bottom: 0;  they should just sit in space */
  padding: 0 2px; /* keep logo from touching edge */
  width: auto;
}

.navbar a {
  font-size: 16px;
  color: #fff; /* use one type of color values */
  padding: 14px 16px;
  text-decoration: none;
}