【JavaScript】虫眼鏡アイコンをクリックして、検索バーを表示

2024年02月26日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はCMSなどを導入しているWEBサイトに使えるギミックを紹介します！

実装例

English
よくあるご質問
検索する

右の虫眼鏡アイコンをクリックしてください。
そうすると検索バーがヌルっと表示されます。
CMSを導入しているサイトだと結構こういったサイト内検索機能がありますよね。
シンプルなデザインのサイトとかで重宝するのではないでしょうか。

HTML例

<ul class="l-header__list">
  <li class="l-header__item">
    <a href="javascript:void(0);">English</a>
  </li>
  <li class="l-header__item">
    <a href="javascript:void(0);">よくあるご質問</a>
  </li>
  <li class="l-header__item">
    <button id="js-search">虫眼鏡アイコン</button>
    <div class="l-header__search">
    <form action="" method="get" name="">
        <input type="text" id="search" class="ti" name="search" value="" placeholder="サイト内検索">
        <label for="l-header__search" class="l-header__search__label">検索する<input type="submit" id="l-header__search"></label>
      </form>
    </div>
  </li>
</ul>

CSS例

.l-header__list{
  list-style: none;
  display: flex;
  align-items: center;
}
.l-header__item{
  box-sizing: border-box;
  padding: 0 30px;
  border-right: 1px solid #c8c8c8;
}
.l-header__item:last-of-type{
  padding: 0 0 0 30px;
  border-right: none;
  display: flex;
}
.l-header__item a{
  color: #000;
  font-size: 14px;
  transition: 0.4s ease;
}
.l-header__item a:hover{
  opacity: 0.7;
}
.l-header__search{
  width: 0;
  opacity: 0;
  transition: 0.6s ease;
  pointer-events: none;
}
.l-header__search form{
  display: flex;
  align-items: center;
}
.l-header__search input[type=text]{
  width: 80%;
  padding: 5px;
  margin: 0 10px 0 30px;
}
.l-header__search input[type=submit]{
  position: absolute;
  left: -9999px;
}
.l-header__search__label{
  cursor: pointer;
  width: 20%;
  min-width: 50px;
  padding: 6px 2px 5px 14px;
  overflow: hidden;
  font-size: 10px;
  color: #555;
  white-space: nowrap;
  border: 1px solid #c8c8c8;
  transition: 0.4s ease;
}
.l-header__search__label:hover{
  background-color: #000;
  color: #fff;
}
#js-search{
  color: transparent;
  background-color: transparent;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  border: 3px solid #000;
  position: relative;
}
#js-search::before{
  content: '';
  position: absolute;
  width: 3px;
  top: 11px;
  right: -4px;
  height: 11px;
  background-color: #000;
  transform: rotate(-45deg);
}
.is-search{
  pointer-events: auto;
  display: block;
  width: 300px;
  opacity: 1;
}

JavaScript例

document.addEventListener('click', function(event) {
  if (event.target.id === 'js-search') {
    var nextElement = event.target.nextElementSibling;
    if (nextElement) {
      nextElement.classList.toggle('is-search');
    }
  }
});