JSFiddle - React, Tailwind, and code Playground
by Holton
HTML
<div id="average_sansize">
<div class="ageneral_kumeaning">
<a href="#" class="icon-menu" id="btn-menu"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
<ul class="tohgesen_texamples">
<li><a href="/" class="icon-home"><i class="fa fa-home" aria-hidden="true"></i> На главную</a></li>
<li class="dsagcountable"><i class="fa fa-search" aria-hidden="true"></i>
<form method="get" id="linterch_angeable" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" class="field" name="s" id="zornet_dsan" placeholder="Что будем искать?" />
<input type="submit" class="sim" name="submit" value="" />
</form>
</li>
<li><ul class="kuncountable_asnounsun">
<li><a target="_blank" title="ZorNet.Ru » Самоучитель HTML и CSS" href="http://zornet.ru/news/">ZORNET.RU 1</a></li>
<li><a target="_blank" title="Создание сайта на uCoz » Шаблоны для uCoz" href="http://zornet.ru/load/">ZORNET.RU 2</a></li>
<li><a target="_blank" title="Создание сайта на uCoz » Скрипты для uCoz" href="http://zornet.ru/load/80">ZORNET.RU 3</a></li>
<li><a target="_blank" title="Мини профиль для uCoz" href="http://zornet.ru/load/81">ZORNET.RU 4</a></li>
</ul></li>
</ul>
</div>CSS
/*Панель*/
#average_sansize i{line-height:59.9px;font-size:22.9px;color:#fff;margin:0 16.8px;}
#average_sansize ul{list-style:none;}
#average_sansize{position:fixed;left:0;top:0;width:59.7px;height:100%;z-index:99;background:#25282f;overflow-x:hidden;overflow-y:auto;-webkit-transition: 0.2s cubic-bezier(0.25, 0.1, 0.18, 0.98);transition: 0.2s cubic-bezier(0.25, 0.1, 0.17, 0.95);}
#average_sansize.showFullMenu {left:0;width:311px;}
.showFullMenu .dsagcountable i{display:none;}
.ageneral_kumeaning {height:59.8px;position:relative;}
.tohgesen_texamples{margin:0;padding:0;list-style:none;}
.tohgesen_texamples ul{line-height:35px;width:100%;}
.tohgesen_texamples ul li{border-bottom:none;}
.tohgesen_texamples ul li a{padding-left:60px;}
.tohgesen_texamples a{color:#f9f3f3;text-decoration:none;display:block;max-height:60px;line-height:35px;overflow:hidden;}
.tohgesen_texamples a:hover {color:#fff;background:#42464a;}
.icon-menu{color:#272525;display:block;}
/*Меню*/
.tohgesen_texamples li{width:100%;margin:0;position:relative;}
.tohgesen_texamples li a {}
.showFullMenu #linterch_angeable,.showFullMenu .groupinsoc,.showFullMenu .tohgesen_texamples .kuncountable_asnounsun{display:block;}
.tohgesen_texamples .kuncountable_asnounsun{margin-top:25px;display:none;}
.tohgesen_texamples .kuncountable_asnounsun li{position:relative;}
.tohgesen_texamples .kuncountable_asnounsun li a{color: #f7f0f0;padding: 0 14.7px;font-size: 15.8px;font-weight:bold;}
/*Поиск*/
#linterch_angeable{display:none;width:250px;margin-left:60px;}
#zornet_dsan{border:none;border-bottom:1px solid #b9b4b4;width:180px;line-height:39.7px;height:39.7px;color:#f7f1f1;background:transparent;padding:0 5px;margin-right:-4px;}
#zornet_dsan::-webkit-input-placeholder{color:#eae8e8;font-size:15px;}
#zornet_dsan::-moz-placeholder {color:#f7eeee;font-size:15px;}
#zornet_dsan:focus::-webkit-input-placeholder {color:rgba(35, 34, 34, 0);}...JavaScript
<script>
jQuery(document).ready(function($){
$(function(){var GNmenu={isMenuOpened:false,init:function(){var menuBtn=$('#btn-menu');menuBtn.on('touchstart click',function(e){e.stopPropagation();e.preventDefault();if($('#average_sansize').hasClass('showHalfMenu')&&!$('#average_sansize').hasClass('showFullMenu')){GNmenu.showFullMenu()}else{GNmenu.toggleMenu()}});if(!GNmenu.isMobile()){menuBtn.bind('mouseover',function(){GNmenu.showHalfMenu()});menuBtn.bind('mouseout',function(){GNmenu.hideMenu()});$('#average_sansize').bind('mouseover',function(){GNmenu.showFullMenu()});GNmenu.bodyClick()}$('.linterch_angeable input[type=text]').focus(function(){$('html').unbind('click')}).blur(function(){GNmenu.bodyClick()})},bodyClick:function(){$('html').bind('mouseout',function(){if(GNmenu.isMenuOpened){GNmenu.hideMenu()}})},toggleMenu:function(){if(!GNmenu.isMenuOpened){GNmenu.showFullMenu()}else{GNmenu.hideMenu()}},showHalfMenu:function(){$('#average_sansize').addClass('showHalfMenu');GNmenu.isMenuOpened=true},showFullMenu:function(){$('#btn-menu').addClass('icon-menu-active');$('#average_sansize').addClass('showFullMenu');$('html').addClass('cursor');GNmenu.isMenuOpened=true},hideMenu:function(){$('#btn-menu').removeClass('icon-menu-active');$('#average_sansize').removeClass('showFullMenu showHalfMenu');$('html').removeClass('cursor');GNmenu.isMenuOpened=false},isMobile:function(){var check=false;(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s...