JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<div id="sidebar-wrapper">
        <ul class="sidebar-nav">
          <li class="sidebar-brand"><a href="#"><img src="img/logo.png" style="opacity: 1;"></a></li>
          <li>
            <a href="#" class='pic'>
                <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/picture-01-32.png">
              <span>portfolio</span>
              
            </a>
            <ul class="sidebar-sub-menu">
                <li><a href="#">Wedding</a></li>
                <li><a href="#">Love stories</a></li>
                <li><a href="#">Portraits</a></li>
                <li><a href="#">Pregnant</a></li>
                <li><a href="#">Children</a></li>
                <li><a href="#">Studio photos</a></li>
            </ul>
        </li>
          <li>
            <a href="#" class='pic'>Services</a>
            <ul class="sidebar-sub-menu">
                <li><a href="#">Photography school</a></li>
                <li><a href="#">Equipment rental</a></li>
                <li><a href="#">Studio rental</a></li>
                <li><a href="#">Photo &amp; video post-processing</a></li>
                <li><a href="#">Outdoor shooting</a></li>
                <li><a href="#">Studio shooting</a></li>
            </ul>
        </li>
          <li><a href="#" class='pic'>blog</a></li>
          <li><a href="#" class='pic'>testimonials</a></li>
          <li><a href="#" class='pic'>about</a></li>
          <li><a href="#" class='pic'>contacts</a></li>
        </ul>

        <div class="sub-menu-holder"></div>

      </div>

CSS

html, body {
	height:100%;
}

body {
	font-family: 'PT Sans', sans-serif;
}

#wrapper {
  padding-left: 180px;
  background-color: #b9b7ba;
height: 100%;
}

#sidebar-wrapper {
  margin-left: -180px;
  left: 180px;
  width: 180px;
  background: #fff;
  position: fixed;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1000;
}

#page-content-wrapper {
	height: 100%;
	position: relative;
}


a,
.navbar-inverse .navbar-nav > li > a {
  color: #fff;
  text-decoration: none;
}
a:hover,
.navbar-inverse .navbar-nav > li > a:hover {
  color: #ff1f4c;
  text-decoration: none;
}

::-webkit-input-placeholder { 
    color:#fff;
}
:-moz-placeholder {
    color:#fff;
}
::-moz-placeholder {
    color:#fff;
}
:-ms-input-placeholder { 
    color:#fff;
}

.navbar-header {
	position: absolute;
left: 0;
top: 0;
}

.sidebar-brand {
	font-weight: normal;
	margin-bottom: 80px;
	margin-top: 30px;
}

.sidebar-nav h4,
.sidebar-nav>li>a {
	text-transform: uppercase;
}

.sidebar-nav h4 {
	margin-bottom: 25px;
}

.sidebar-nav {
  font-family: 'Roboto Condensed', sans-serif;
  width: 180px;
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.sidebar-nav h5 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px;
	color: #333333;
	margin-bottom: 20px;
}

.sidebar-nav>li>a {
  font-size: 15px;
  color: #666666;
  padding-bottom: 20px;
  display: block;
  text-decoration: none;
}


.sidebar-nav>li>a:hover {
  color: #ff1f4c;
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-sub-menu {
	display: none;
	list-style: none;
	text-align: center;
	margin: -10px 0 0 0; 
	padding-left: 0;

}
.sidebar-sub-menu li {
margin-bottom: 15px;
}

.sidebar-sub-menu li a {
	color: #fff;
	font-style: italic;
}

.sidebar-sub-menu>li>a:hover {
  color: #ff1f4c;	
}

.sidebar-brand a {
	width: 156px;
	margin: 0 auto;
}

.sidebar-brand a img {
	width: 100%;
height: auto;
display: block;
}

.social-icons...

JavaScript

$('.sub-menu-holder').on('mouseenter', function(event) {
        $('.sidebar-brand>a>img').animate({opacity: '0'}, 200);
        $('.sub-menu-holder').show();
    });
    $('.sub-menu-holder').on('mouseleave', function() {
        $('.sub-menu-holder').hide();
    });
    $('.pic').on('mouseenter', function(event) {
      event.preventDefault();
        var eTarget = $(event.target);
        var subMenu = eTarget.parent().find('.sidebar-sub-menu');
        if (eTarget.is("img")) {
            var subMenu = eTarget.parent().parent().find('.sidebar-sub-menu');
        }
        if (subMenu.length !== 0) {
          var positionTop = $(event.target).position().top;
          $('.sidebar-brand>a>img').animate({opacity: '0'}, 200);
          $('.sub-menu-holder').html('');
          $('.sub-menu-holder').html($.parseHTML('<span class="arrow"></span>')).append(subMenu.clone().fadeIn());
          $('.sub-menu-holder').show();
          $('.sub-menu-holder>.arrow').css({top: positionTop});
        }else{
          $('.sidebar-brand>a>img').animate({opacity: '1'}, 300);
        }
    });
    $('.pic').on('mouseleave', function() {
      var subMenu = $(event.target).parent().find('.sidebar-sub-menu');
      if (subMenu.length !== 0) {
        $('.sub-menu-holder').hide();
      }
    });

    $('#sidebar-wrapper').on('mouseleave', function() {
        $('.sidebar-brand>a>img').animate({opacity: '1'}, 200);
    });