JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<nav>
    <ul>
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
        <li><a href="#">item 5</a></li>
    </ul>
    <div class="triangle" data-slide="1">
	    <span class="triangle_top"></span>
		<span class="triangle_bottom"></span>
    </div>
</nav>

CSS

body {
    padding: 30px;
    background: url(http://th00.deviantart.net/fs71/PRE/i/2011/133/2/0/color_filled_in_by_iwilwait4ever-d3g8lk6.jpg);
}

nav {
    width: 80px;
    height: 250px;
    background: #222;
    position: relative;
    border-radius: 0 4px 4px 0;
}

ul {
    position: relative;
    z-index: 10;
}

li {
    /* margin-left: -6px; */
}

li:nth-child(even) {
    background: #555;
}

a {
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}


/*************/
.triangle {
  position: absolute;
  width: 6px;
  top: 0;
  left: -6px;
  bottom: 0;
  border-radius: 4px 0 0 4px;
  z-index: 1;
}
.triangle_top,
.triangle_bottom {
  position: absolute;
  left: 0;
  right: 0;
  background: #222;
}
.triangle_top:before,
.triangle_bottom:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  left: 0;
}
.triangle_top {
  top: 0;
  height: 184px;
  border-radius: 4px 0 0 0;
  transition: .3s;
}
.triangle_top:before {
  border-width: 0 6px 6px 0;
  bottom: -6px;
}
.triangle[data-slide="1"] .triangle_top:before, 
.triangle[data-slide="3"] .triangle_top:before, 
.triangle[data-slide="5"] .triangle_top:before {
  border-color: transparent #222 transparent transparent;
}
.triangle[data-slide="2"] .triangle_top:before,  
.triangle[data-slide="4"] .triangle_top:before {
  border-color: transparent #555 transparent transparent;
}
.triangle_bottom {
  bottom: 0;
  height: 423px;
  border-radius: 0 0 0 4px;
  transition: .3s;
}
.triangle_bottom:before {
  border-width: 0 0 6px 6px;
  top: -6px;
}
.triangle[data-slide="1"] .triangle_bottom:before, 
.triangle[data-slide="3"] .triangle_bottom:before, 
.triangle[data-slide="5"] .triangle_bottom:before {
  border-color: transparent transparent #222 transparent;
}
.triangle[data-slide="2"] .triangle_bottom:before, 
.triangle[data-slide="4"] .triangle_bottom:before {
  border-color: transparent transparent #555...

JavaScript

$(document).on('click', 'nav a', function(){
    var i = $(this).closest('li').index() + 1;
    $('.triangle').attr('data-slide', i)
    return false;    
});