时间戳

首页 > 解决方案 > 尝试将搜索合并到响应式菜单中的问题

html - 尝试将搜索合并到响应式菜单中的问题

问题描述

我正在尝试制作一个响应式菜单 - 我对桌面版本很满意，但我搞砸了它的移动版本。

在小于 600 像素的屏幕上，如何让搜索栏出现在汉堡包中（最好在顶部，文本框旁边的搜索图标）而不是在该行下方？

（我也试图让菜单栏变得有粘性，并将 Home 替换为仅低于 600px 的徽标，但一次只做一件事......）

任何帮助都感激地，感激地，感激地接受。提前谢谢了！

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
html {
    font-family: 'Bree Serif', serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: orange;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  display: inline;
  margin: 0;
}

/* Reset padding and margin which gives us full width colour bars when required */
body {
padding: 0;
margin: 0;
}


div.header {
padding: 20px;
font-size: 24px;
  color: white;
        background: #DD1100;
}

div.mainBlog{
padding: 20px;
font-size: 18px;
}

div.mainPanelMobile{
padding: 20px;
font-size: 18px;
}


div.mainPanel2{
padding: 20px;
background: yellow;
font-size: 18px;
}

div.footer {
padding: 20px;
font-size: 16px;
  color: white;
        background: #DD1100;
}

/* =============================================================== */

/* For mobile phones: any relevant code goes below */
/* if I want to make it invisible I need to add: */
/* position: absolute; */
/* left: -9999px; */
@media (max-width: 720px) {

div.mainPanel {
        background: white;
  padding: 20px;
}



}

/* =============================================================== */

/* For tablet computers: */
@media (min-width: 721px) and (max-width: 1199px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
  padding: 20px;
}

div.mainPanel {
        background: white;
  padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}

div.footer{
padding: 20px;
}

.sidebar {
    padding-left: 0px;
}

}

/* =============================================================== */

/* For desktop computers: */
@media (min-width: 1200px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

.left {
    width: 70%;
    float: left;
}

.right {
    width: 30%;
    float: left;
}

.sidebar {
    padding-left: 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
padding: 20px;
}

div.mainPanel {
        background: white;
padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}


div.footer{
padding: 20px;
}

}

/* =============================================================== */


/* This section is the CSS for the responsive menu: */

.topnav {
  overflow: hidden;
  background-color: #EEE;
}

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

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

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.topnav .icon {
  display: none;
}

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

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

.topnav .search-container {
  float: left;
}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}



}


/* =============================================================== */
<!DOCTYPE html>
<html>
    
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
    
  <body>
    
    <div class="wholeAreaIndex">
    
      <! –– header ––&gt;
      <div class="header">
      Title
      </div>
    
      <! –– menu ––&gt;
      <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
      </div>
    
      <! –– content  ––&gt;
    
      <div class="mainPanel" style="background-color:yellow;">
        Hello! This is a header.
      </div>
    
      <div class="mainPanel">
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      </div>
    
      <! –– footer ––&gt;
      <div class="footer">
      Footer
      </div>
    
    
    </div>
    
  </body>
</html>

标签： htmlcssresponsive

解决方案

  1. 第一件事是您有 2 个最大宽度为 600 像素的媒体查询。只要设置一个就足够了。
  2. 然后我在课堂上添加了你的 600px 视图：.topnav a:not(:first-child)像.topnav a:not(:first-child), .topnav .search-container这样，它将像其他块一样工作。就像搜索栏display none一样
  3. 然后我添加.topnav.responsive .search-container到现有 .topnav.responsive a显示。并添加了在顶部设置搜索栏的顺序
  .topnav.responsive .search-container{
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a:first-child, .topnav.responsive .search-container{
    order: -1;
  }
  .topnav.responsive .search-container form{
    display:flex;
  }
  1. 为了制作order作品，我还需要将 display flex 添加到容器中，如下所示
.topnav.responsive {
    position: relative;
    display:flex;
    flex-direction: column;
  }

演示 

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
html {
    font-family: 'Bree Serif', serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: orange;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  display: inline;
  margin: 0;
}

/* Reset padding and margin which gives us full width colour bars when required */
body {
padding: 0;
margin: 0;
}


div.header {
padding: 20px;
font-size: 24px;
  color: white;
        background: #DD1100;
}

div.mainBlog{
padding: 20px;
font-size: 18px;
}

div.mainPanelMobile{
padding: 20px;
font-size: 18px;
}


div.mainPanel2{
padding: 20px;
background: yellow;
font-size: 18px;
}

div.footer {
padding: 20px;
font-size: 16px;
  color: white;
        background: #DD1100;
}

/* =============================================================== */

/* For mobile phones: any relevant code goes below */
/* if I want to make it invisible I need to add: */
/* position: absolute; */
/* left: -9999px; */
@media (max-width: 720px) {

div.mainPanel {
        background: white;
  padding: 20px;
}



}

/* =============================================================== */

/* For tablet computers: */
@media (min-width: 721px) and (max-width: 1199px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
  padding: 20px;
}

div.mainPanel {
        background: white;
  padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}

div.footer{
padding: 20px;
}

.sidebar {
    padding-left: 0px;
}

}

/* =============================================================== */

/* For desktop computers: */
@media (min-width: 1200px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

.left {
    width: 70%;
    float: left;
}

.right {
    width: 30%;
    float: left;
}

.sidebar {
    padding-left: 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
padding: 20px;
}

div.mainPanel {
        background: white;
padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}


div.footer{
padding: 20px;
}

}

/* =============================================================== */


/* This section is the CSS for the responsive menu: */

.topnav {
  overflow: hidden;
  background-color: #EEE;
}

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

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

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .topnav .search-container {
    display: none;
    }
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {
    position: relative;
    display:flex;
    flex-direction: column;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a,
  .topnav.responsive .search-container{
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a:first-child,
  .topnav.responsive .search-container{
    order: -1;
  }
  .topnav.responsive .search-container form{
    display:flex;
  }

.topnav .search-container {
  float: left;
}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}



}


/* =============================================================== */
<!DOCTYPE html>
<html>
    
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
    
  <body>
    
    <div class="wholeAreaIndex">
    
      <! –– header ––&gt;
      <div class="header">
      Title
      </div>
    
      <! –– menu ––&gt;
      <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
      </div>
    
      <! –– content  ––&gt;
    
      <div class="mainPanel" style="background-color:yellow;">
        Hello! This is a header.
      </div>
    
      <div class="mainPanel">
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      </div>
    
      <! –– footer ––&gt;
      <div class="footer">
      Footer
      </div>
    
    
    </div>
    
  </body>
</html>

推荐阅读