<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<style>@charset "utf-8";
/*========= 検索窓を開くための虫眼鏡ボタン設定 ===========*/
.open-btn {
position: absolute;
top: 10px;
right: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.9);
background: rgba(255, 255, 255, 0.3)
url("/wp-content/uploads/demos/_assets/icon_search.svg") no-repeat 15px
center; /*虫眼鏡アイコンを背景に表示*/
background-size: 20px 20px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.open-btn.hidden {
display: none;
}
/*========= 検索窓の設定 ===============*/
/*==検索窓背景のエリア*/
/*検索窓のエリア*/
#search-wrap {
position: fixed; /*固定配置にして*/
top: 0;
left: 0;
z-index: -1; /*最背面に設定*/
opacity: 0; /*透過を0に*/
transition: all 0.4s; /*transitionを使ってスムースに現れる*/
width: 100%;
height: 100vh;
}
/*テキスト入力input設定*/
#search-text {
-webkit-appearance: none; /*SafariやChromeのデフォルトの設定を無効*/
width: 60px; /*テキスト入力エリアが伸びる前の横幅*/
height: 60px;
padding: 20px;
border-radius: 10px;
box-shadow: 5px 5px 2px rgba(6, 0, 1, 0.7);
background: rgba(255, 255, 255, 0.3); /*虫眼鏡アイコンを背景に表示*/
background-size: 20px 20px;
transition: all 0.5s; /*transitionを使ってスムースに伸ばす*/
outline: none;
cursor: pointer; /*カーソルを指マークに*/
}
/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive {
opacity: 1; /*不透明に変更*/
z-index: 3; /*全面に出現*/
background-image: linear-gradient(
358.4deg,
rgba(249, 151, 119, 0.5) -2.1%,
rgba(98, 58, 162, 0.5) 90%
);
/*中の要素を天地中央揃えにする設定*/
display: flex;
justify-content: center;
align-items: center;
}
/*==検索窓のエリア*/
#search-wrap .search-area {
display: none; /*検索窓のエリアは、はじめ非表示*/
}
/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後*/
#search-wrap.panelactive .search-area {
display: block; /*検索窓エリアを表示*/
width: 80%;
position: relative;
}
/*==検索フォームの設定*/
#search-wrap form {
position: relative;
height: 66px;
}
/*==テキスト入力とボタンinput共通設定*/
#search-wrap input {
-webkit-appearance: none; /*SafariやChromeのデフォルトの設定を無効*/
outline: none;
cursor: pointer; /*カーソルを指マークに*/
color: #fff;
}
/*テキスト入力input設定*/
#search-wrap input[type="text"] {
width: 100%;
padding: 20px;
border: none;
border-bottom: 2px solid #666;
transition: all 0.5s;
letter-spacing: 0.05em;
}
#search-wrap input[type="text"]:focus {
background: #444;
}
/*ボタンinput設定*/
#search-wrap input[type="submit"] {
position: absolute;
top: 0;
right: 10px;
background: url("/wp-content/uploads/demos/_assets/icon_search.svg") no-repeat
15px center; /*虫眼鏡アイコンを背景に表示*/
background-size: 25px 25px;
width: 60px;
height: 60px;
}
/*======= 閉じるための×ボタン ========*/
.close-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
cursor: pointer;
width: 60px;
height: 60px;
}
.close-btn span {
display: inline-block;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
}
/*×マーク*/
.close-btn span:nth-of-type(1) {
top: 21px;
left: 16px;
transform: translateY(6px) rotate(-135deg);
width: 50%;
}
.close-btn span:nth-of-type(2) {
top: 32px;
left: 16px;
transform: translateY(-6px) rotate(135deg);
width: 50%;
}
/*========= レイアウトのためのCSS ===============*/
img {
width: 100%;
height: 100vh;
vertical-align: middle;
filter: brightness(95%) blur(1px);
object-fit: cover;
}
.text {
margin: 0 0 10px 0;
position: absolute;
mix-blend-mode: overlay;
color: white;
font-size: clamp(12px, 5vw, 2rem);
font-weight: bold;
text-align: right;
top: 100px;
right: 20px;
}
.text.hidden {
display: none;
}</style>
</head>
<body>
<body>
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/wave.jpeg" />
<div class="open-btn">
</div>
<div id="search-wrap">
<div class="close-btn">
<span>
</span>
<span>
</span>
</div>
<div class="search-area">
<form role="search" method="get" action="">
<input type="text" value="" name="" id="search-text" placeholder="search">
<input type="submit" id="searchsubmit" value="">
</form>
</div>
<!--/search-area-->
</div>
<!--/search-wrap-->
<p class="text">虫眼鏡マークをクリックすると<br>全画面表示で検索窓が出現</p>
<script>//開くボタンを押した時には
$(".open-btn").click(function () {
$("#search-wrap").addClass("panelactive"); //#search-wrapへpanelactiveクラスを付与
$(".open-btn").addClass("hidden"); //.open-btnへhiddenクラスを付与
$(".text").addClass("hidden"); //.textへhiddenクラスを付与
$("#search-text").focus(); //テキスト入力のinputにフォーカス
});
//閉じるボタンを押した時には
$(".close-btn").click(function () {
$("#search-wrap").removeClass("panelactive"); //#search-wrapからpanelactiveクラスを除去
$(".open-btn").removeClass("hidden"); //.open-btnからhiddenクラスを除去
$(".text").removeClass("hidden"); //.textからhiddenクラスを除去
});
//# sourceURL=pen.js</script>
</body>
</html>