検索のアイコンを押下したらヘッダーの下に横幅いっぱいで出したいと考えてます。
例えば、stackoverflowの検索ボックスもブラウザの幅を狭くするとアイコンだけになり、アイコンを押すとヘッダーのしたに検索ボックスが出てくる様になっていますが、同じ様な動きを想定してます。
stackoveflowの検索ボックスには関連するタグや、質問するボタンなどは表示されてますが、それは不要で、単純にアイコンをクリックすると検索ボックスが横幅いっぱいにヘッダーのすぐ下に出てき欲しいです。
今はアイコンがずれて、検索ボックスが出てくるので、アイコンはずれず、ヘッダーの下に出せればと考えてます。
以上、よろしくお願いします。
@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;
}
<!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>