YouTube Yandan Açılmalı Menü

Arkdaşlar bir kaç css js aradım ancak bir türlü yapamadım aşağıdaki resimde sarı renkte olan bölüme youtube deki gibi yandan açılmalı menü nasıl yapıcam

Bilen Arkdaşlar css kodlarını atarsa iyi olur

İyi Forumlar :))

demosu: DEMO




* {
margin: 0;
padding: 0;
box-sizing: border-box; }

body {
background-color: black; }

a {
text-decoration: none;
width: 100%;
height: 100%;
font-family: 'Open Sans';
font-size: 14px;
cursor: default;
color: #838ea7; }

nav {
width: 100%;
top: 30%;
left: 42%;
background-color: #FEFEFE;
position: absolute;
border-radius: 2px;
display: inline-block;
height: 50px;
line-height: 50px;
width: 300px; }

nav ul li ul {
display: none;
margin-top: 20px; }
nav ul li ul li {
display: block; }
nav ul li ul li:hover {
background-color: #F4F4F4; }
nav ul li ul li svg {
margin-left: 20px;
margin-right: 20px; }

nav li li {
background-color: #FEFEFE; }

.home {
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom: 1px #d7d9dd solid;
position: relative; }
.home svg {
width: 20px;
height: 20px;
position: relative;
top: 4px; }
.home:hover a {
color: #6d6c6c; }
.home:hover .blue-box {
background-color: #3FA6FD;
position: absolute;
margin-left: 0;
height: 100%;
width: 4px; }
.home:hover #home {
fill: #6d6c6c; }

.settings {
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
border-top: 1px #d7d9dd solid; }
.settings svg {
width: 20px;
height: 20px;
position: relative;
top: 4px; }
.settings:hover a {
color: #6d6c6c; }
.settings:hover .blue-box {
background-color: #3FA6FD;
position: absolute;
margin-left: 0;
height: 100%;
width: 4px; }
.settings:hover #gear {
fill: #6d6c6c; }

.messages svg {
width: 20px;
height: 20px;
position: relative;
top: 4px; }

.messages:hover a {
color: #6d6c6c; }

.messages:hover .blue-box {
background-color: #3FA6FD;
position: absolute;
margin-left: 0;
height: 100%;
width: 4px; }

.messages:hover #mail {
fill: #6d6c6c; }

.hamburger {
margin-right: 20px;
margin-left: 20px; }

.arrow {
width: 0;
height: 0;
margin-left: 275px;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
border-bottom: 9px solid #FEFEFE;
position: absolute;
top: -9px; }

.fa-chevron-up {
margin-left: 110px; }

.marked {
background-color: #3FA6FD;
border-radius: 2px; }

.marked1 {
color: #ffffff; }

.rotate {
moz-transition: all 0.3s linear;
webkit-transition: all 0.3s linear;
transition: all 0.3s linear; }

.rotate.down {
moz-transform: rotate(180deg);
webkit-transform: rotate(180deg);
transform: rotate(180deg); }

/*# sourceMappingURL=main.css.map */