

検索のアイコンを押下したらヘッダーの下に横幅いっぱいで出したいと考えてます。  
例えば、stackoverflowの検索ボックスもブラウザの幅を狭くするとアイコンだけになり、アイコンを押すとヘッダーのしたに検索ボックスが出てくる様になっていますが、同じ様な動きを想定してます。

stackoveflowの検索ボックスには関連するタグや、質問するボタンなどは表示されてますが、それは不要で、単純にアイコンをクリックすると検索ボックスが横幅いっぱいにヘッダーのすぐ下に出てき欲しいです。  
今はアイコンがずれて、検索ボックスが出てくるので、アイコンはずれず、ヘッダーの下に出せればと考えてます。  
以上、よろしくお願いします。

[code]

    @charset "utf-8";
    .header{
      margin-top: 20px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 70px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .header__inner{
      max-width: 1552px;
      width: 95%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .header__inner2{
      max-width: 1552px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .header__logo{
      flex: none;
      width: auto;
      height: 50px;
      margin : 0 auto;
    }
    .header__navgroup{
      margin : 0 auto;
      display: flex;
      flex: none;
    }
    .header__navgroup > * + *{
      margin-left: 6px;
      margin-right: 6px;
    }
    .header__navitem{
      font-size: 16px;
      color: #000;
    }
    .header__icon{
      margin-top: 10px;
      margin-left: 20px;
      margin-right: 20px;
      flex: none;
      width: auto;
      height: 15px;
    }
    
    .hidden_box {
    margin: 2em 0;/*前の余白*/
    padding: 0;
    }
    
    /*ボタン装飾*/
    .hidden_box label {
    }
    
    /*ボタンホバー時*/
    .hidden_box label:hover {
    background: #efefef;
    }
    
    /*チェックは見えなくする*/
    .hidden_box input[type=checkbox] {
    display: none;
    }
    
    /*中身を非表示にしておく*/
    .hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    }
    
    /*クリックで中身表示*/
    .hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
    }
    
    .search_container{
      box-sizing: border-box;
      position: relative;
      border: 1px solid #999;
      padding: 3px 10px;
      border-radius: 20px;
      height: 2.3em;
      width: 260px;
      overflow: hidden;
    }
    .search_container input[type="text"]{
      border: none;
      height: 2.0em;
      width: 87%;
    }
    .search_container input[type="text"]:focus {
      outline: 0;
    }
    .search_container input[type="image" i]{
      width: 17px; 
      height: 17px;
      margin-top: 5px;
      }
    
    
    .display_box {
      margin: 2em 0;
      padding: 0;
    }
    .display_box label {
      padding: 15px;
      font-weight: bold;
      color: #FFF;
      background-color: #F7823F;
      cursor :pointer;
    }
    .display_box input {
      display: none;
    }
    .display_box .hidden_box1 {
      visibility: hidden;
    }
    .display_box input:checked ~ .hidden_box1 {
      padding: 10px 0;
      height: auto;
      visibility: visible;
    }
[/code]

[code]

    <!doctype html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    </head>
    
    <div class="header">
      <div class="header__inner">
      <img class="header__logo" src="https://gigaplus.makeshop.jp/kukunochi/img/header/blue.png">
      <div class="header__navgroup">
      <div class="hidden_box">
     <label for="label1"> <img class="header__icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/search.jpg"></label>
    <input type="checkbox" id="label1"/>
      <img class="header__icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/mymenu.jpg">
      <img class="header__icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/register.png">
    <div class="hidden_show">
    <!--非表示ここから-->     
    <form method="get" action="#" class="search_container">
        <input type="text" size="25" placeholder="キーワード検索">
        <input type="image" alt="検索" src="https://gigaplus.makeshop.jp/kukunochi/img/header/search.jpg">
    </form>
    <!--ここまで-->
    </div>
    </div>
      </div>
    
    </div>
[/code]


CC BY-SA 4.0
2020-08-16T07:03:52.713
69597
2020-08-16T08:59:45.140
2020-08-16T08:28:27.223
32986
40597
question
html css
検索ボックスをアイコンクリックで表示/非表示にしたい


フローの外にある要素でない限り、検索ボックスとなる要素が **親要素のサイズを無視することは困難** です。加えて、フロー外の要素は **制御が複雑**
なため、根本的な HTML 構造を変更したり、 JavaScript の導入を検討したりする必要があります。

今回は HTML 構造上、 HTML, CSS に幾つかの変更を実施することで検索ボックスを幅いっぱいに広げることが出来ます。

[code]

    @charset "utf-8";
    .header {
      margin-top: 20px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 70px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .header__inner {
      max-width: 1552px;
      width: 95%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
    }
    
    .header__inner2 {
      max-width: 1552px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    
    .header__logo {
      flex: none;
      width: auto;
      height: 50px;
      margin: 0 auto;
    }
    
    .header__navgroup {
      margin: 0 auto;
      display: flex;
      flex: none;
    }
    
    .header__navgroup>*+* {
      margin-left: 6px;
      margin-right: 6px;
    }
    
    .header__navitem {
      font-size: 16px;
      color: #000;
    }
    
    .header__icon {
      margin-top: 10px;
      margin-left: 20px;
      margin-right: 20px;
      flex: none;
      width: auto;
      height: 15px;
    }
    
    .hidden_box {
      margin: 2em 0;
      /*前の余白*/
      padding: 0;
    }
    
    
    /*ボタン装飾*/
    
    .hidden_box label {}
    
    
    /*ボタンホバー時*/
    
    .hidden_box label:hover {
      background: #efefef;
    }
    
    
    /*チェックは見えなくする*/
    
    .header__inner input[type=checkbox] {
      display: none;
    }
    
    
    /*中身を非表示にしておく*/
    
    .hidden_show {
      display: flex;
      justify-content: center;
      height: 0;
      padding: 0;
      overflow: hidden;
      opacity: 0;
      transition: 0.8s;
      flex-basis: 100%;
    }
    
    .search_container {
      flex: 1;
    }
    
    
    /*クリックで中身表示*/
    
    input:checked~.hidden_show {
      padding: 10px 0;
      height: auto;
      opacity: 1;
    }
    
    .search_container {
      box-sizing: border-box;
      position: relative;
      border: 1px solid #999;
      padding: 3px 10px;
      border-radius: 20px;
      height: 2.3em;
      width: 260px;
      overflow: hidden;
    }
    
    .search_container input[type="text"] {
      border: none;
      height: 2.0em;
      width: 87%;
    }
    
    .search_container input[type="text"]:focus {
      outline: 0;
    }
    
    .search_container input[type="image"i] {
      width: 17px;
      height: 17px;
      margin-top: 5px;
    }
    
    .display_box {
      margin: 2em 0;
      padding: 0;
    }
    
    .display_box label {
      padding: 15px;
      font-weight: bold;
      color: #FFF;
      background-color: #F7823F;
      cursor: pointer;
    }
    
    .display_box input {
      display: none;
    }
    
    .display_box .hidden_box1 {
      visibility: hidden;
    }
    
    .display_box input:checked~.hidden_box1 {
      padding: 10px 0;
      height: auto;
      visibility: visible;
    }
[/code]

[code]

    <div class="header">
      <div class="header__inner">
        <img class="header__logo" src="https://gigaplus.makeshop.jp/kukunochi/img/header/blue.png">
        <div class="header__navgroup">
          <div class="hidden_box">
            <label for="label1"> <img class="header__icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/search.jpg"></label>
            <img class="header__icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/mymenu.jpg">
            <img class="header__icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/register.png">
          </div>
        </div>
        <input type="checkbox" id="label1" />
        <div class="hidden_show">
          <form method="get" action="#" class="search_container">
            <input type="text" size="25" placeholder="キーワード検索">
            <input type="image" alt="検索" src="https://gigaplus.makeshop.jp/kukunochi/img/header/search.jpg">
          </form>
        </div>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2020-08-16T08:59:45.140
69599
2020-08-16T08:59:45.140
32986
69597
answer