JSFiddle - React, Tailwind, and code Playground

by malikzh

HTML

<nav>
  <a href="#">КАТЕГОРИЯ</a>
  <a href="#">КАТЕГОРИЯ</a>
  <a href="#">КАТЕГОРИЯ</a>
  <a href="#">КАТЕГОРИЯ</a>
</nav>
<aside>

<div style="background-color: #fee">
 МУЖЧИНАМ
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
</div>


<div style="background-color: #efe">
 ЖЕНЩИНАМ
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
</div>


<div style="background-color: #eef">
 ДЕТЯМ
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
 <p>
 <a href="#">
   Подкатегория
 </a>
 </p>
</div>

</aside>

CSS

body {
  font-family: sans-serif;
  font-size: 14px;
  color: #444;
}

nav {
  display: flex;
  flex-direction: row;
  flex: 0 0 100%;
  flex-wrap: nowrap;
  height: 100px;
  background: #f2f2f2;
  align-items: center;
}

nav a {
  display: block;
  width:100%;
  color: #555;
  text-decoration: none;
  padding: 40px 20px;
}

nav a:hover {
  background: #525252;
  color: white;
}

nav:hover + aside {
  display: flex;
}

aside {
  display: none;
  height: 400px;
  background: #f8f8f8;
  flex: 0 0 100%;
}

aside:hover {
  display: flex;
}

aside > div {
  width: 100%;
  cursor: pointer;
  transition: width 100ms ease;
}

JavaScript

$('aside > div').on('click', function () {
	$(this).parent().children('div').css('width', '5%').children('p').css('display', 'none');
  $(this).css('width', '90%').children('p').css('display', 'block');
});