JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main-menu">
    <div id="main-menu-wrapper">
      <span id="men-switch"></span>
      <div id="main-menu-type" class="center">
        <div id="menu-men">
          <div class="menu-header"><div class="menu-header-wrapper center"><h2>Pánské produkty</h2></div></div> 
        </div>
        <div id="menu-woman">
          <div class="menu-header"><div class="menu-header-wrapper center"><h2>Dámské produkty</h2></div></div> 
        </div>
      </div>
      <span id="woman-switch"></span>
      <span id="men-products"></span>
      <span id="woman-products"></span>
    </div>
</nav>

CSS

* {
  margin: 0;
  padding: 0;
}
h2 {
  font-size: 11px;
}
.full-width {
  width: 960px;
}
.center {
  margin: 0 auto;
}
nav {
    margin:0 auto; 
    position:relative;  
}
/* main menu */
#main-menu {
  margin-top: 20px;
  height: 200px;
  display: block;
  width: 960px;   
}
#door {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
#men-products {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: url('http://www.tobefit.cz/images/panske.jpg');
  cursor: pointer;
}
#woman-products {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background-image: url('http://www.tobefit.cz/images/damske.jpg');
  cursor: pointer;
}
#main-menu-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-color: blue; 
  text-align: center;
}
#main-menu-type {
  position: relative;
  width: 80%;
  height: 100%;
  background-color: yellow;
  display: inline-block;
}
#menu-men {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background-color: blue;
}
#menu-woman {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background-color: pink;
}
#men-switch {
  position: absolute;
  left: 0;
  width: 10%;
  height: 100%;
  background-color: green;
  display: inline-block;
  cursor: pointer;
}
#woman-switch {
  position: absolute;
  right: 0;
  width: 10%;
  height: 100%;
  background-color: black;
  display: inline-block;
  cursor: pointer;
}
.menu-header {
  text-align: center;
}
.menu-header-wrapper {
  margin-top: 2px;
  width: 150px;
  background-color: white;
  padding-top: 2px;
  border-radius: 5px;
}
/* main menu */

JavaScript

$(document).ready(function(){ 
  $("#men-products").click(function(){  
      $("#menu-woman").insertBefore("#menu-men");
      $(this).animate({width: '96px'}, 2000);
      $("#woman-products").animate({width: '96px'}, 2000);
  });    
  $("#woman-products").click(function(){      
      $("#menu-men").insertBefore("#menu-woman");
      $("#men-products").animate({width: '96px'}, 2000);
      $(this).animate({width: '96px'}, 2000);
  });    

  $("#men-switch").click(function(){      
      $("#menu-woman").insertBefore("#menu-men");
  });
  $("#woman-switch").click(function(){      
      $("#menu-men").insertBefore("#menu-woman");
  });
});