虫眼鏡マークをクリックすると、全画面表示で検索窓が出現

検索
-虫眼鏡マークをクリックすると、全画面表示で検索窓が出現-

See the Pen 7-2-2 虫眼鏡マークをクリックすると、全画面表示で検索窓が出現 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の要素をクリックして動きを確かめてね！

動きを実現する仕組み

jQuery を使い、虫眼鏡マークをクリックすると隠れていたエリアのHTML にクラス名を付与する。クラスが付与されたらCSS で非表示から表示に変更する。
× マークが押されたらjQuery でクラスマークを除去し、CSS で非表示にする。

［使用するライブラリ］
＊ jQuery

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-2-2.css">
</head>

body内のスライドを表示させたい場所にHTMLを記載します。

<div class="open-btn"></div><!--虫眼鏡マークのHTML-->
<div id="search-wrap"><!--表示エリアのHTML虫眼鏡マークをクリックするとsearch-wrap に表示用のクラス名が付与されて前面に画面表示。閉じるボタン（close-btn）をクリックするとクラス名が除去されて非表示。-->
<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>
<!--/search-area--></div>
<!--/search-wrap--></div>

body 終了タグ直前に jQuery、動きを制御する自作のJS の2つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/7-2-2.js"></script>
</body>

自作のCSS内の書き方

/*========= 検索窓を開くための虫眼鏡ボタン設定 ===========*/

.open-btn{
	position: absolute;
	top:10px;
	right:10px;
	background:#fff url("../img/icon_search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
	background-size: 20px 20px;
	width:50px;
	height:50px;
	border-radius: 50%;
	cursor: pointer;
}

/*========= 検索窓の設定 ===============*/

/*==検索窓背景のエリア*/

#search-wrap{
    position:fixed;/*固定配置にして*/
	top: 0;
    left: 0;
	z-index: -1;/*最背面に設定*/
	opacity: 0;/*透過を0に*/
	transition: all 0.4s;/*transitionを使ってスムースに現れる*/
	width:100%;
	height: 100vh;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive{
	opacity: 1;/*不透明に変更*/
	 z-index: 3;/*全面に出現*/
	 background:#333;
    /*中の要素を天地中央揃えにする設定*/
	 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("../img/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%;
}

自作のJS内の書き方

//開くボタンを押した時には
$(".open-btn").click(function () {
    $("#search-wrap").addClass('panelactive');//#search-wrapへpanelactiveクラスを付与
	$('#search-text').focus();//テキスト入力のinputにフォーカス
});

//閉じるボタンを押した時には
$(".close-btn").click(function () {
    $("#search-wrap").removeClass('panelactive');//#search-wrapからpanelactiveクラスを除去
});