JSFiddle - React, Tailwind, and code Playground

by Bohdan Doroshenko

HTML

<header>
  <div class="container">
    <div class="menublock">
      <ul>
        <li><a href="#">Пункт</a></li>
        <li><a href="#">Пункт</a></li>
        <li><a href="#">Пункт</a></li>
        <li><a href="#">Пункт</a></li>
        <li><a href="#" data-mark="search">Поиск</a></li>
      </ul>
      <div class="searchblock">
        Тут поиск
        <span class="close">Закрыть кху ям</span>
      </div>
    </div>
  </div>
</header>

CSS

.container { width:400px; margin:0 auto; }
.menublock {background:#c0c0c0; position:relative;}
.menublock ul li  {display:inline-block; margin:0 10px 0 0;}
.menublock ul li a {padding: 7px; display:block;}

.menublock .searchblock {display:none; background:#f00; position: absolute; width:100%; height: 100%; top:0; left:0;}

.close {color: white; cursor:pointer;}

JavaScript

$('[data-mark="search"]').click(function() {
	$('.searchblock').show(500);
})

$('.close').click(function() {
	$('.searchblock').hide(500);
})