响应式横幅 CSS/HTML

Question

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

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

我想做到这一点，以便当视口缩小到足够小时，所有 header 都包含在手风琴线上的某些东西中，或者创建我自己的具有相同样式的按钮（下拉菜单）作为手风琴。我需要使用 :before 还是 :after.

类似这样的东西（在小视口中包含所有 headers/anchors）：

这是我的原始片段 & 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 往往有点冗长，去掉多余的东西通常会使 readable/less 更令人头疼。

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

响应式横幅 CSS/HTML

Responsive Banner CSS/HTML

html

css

accordion

responsive