<div class="nav">
<div class="navObject">
<i class="fas fa-home"></i>
<span>Home</span>
</div>
<div class="navObject">
<i class="fas fa-project-diagram"></i>
<span>Project</span>
</div>
<div class="navObject">
<i class="fas fa-hands-helping"></i>
<span>Support</span>
</div>
<div class="navObject">
<i class="fas fa-id-badge"></i>
<span>Profile</span>
</div>
<div class="navObject">
<i class="fas fa-question-circle"></i>
<span>Query</span>
</div>
<div class="btn">
<button type="" onclick="navOpen()"><i class="fas fa-angle-right"></i></button>
</div>
</div>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav{
position: relative;
width: 120px;
min-height: 100vh;
display: flex;
/*justify-content: center;*/
align-items: center;
flex-direction: column;
background: #000000;
box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.6);
/* top: 50%;
left: 50%;
transform: translateX(-50%) translateY(50%);*/
color: #fff;
padding: 22px;
/* border-radius: 22px auto;*/
}
.nav .navObject{
width: 100px;
/*height: 0px;*/
text-align: center;
margin: 15px 12px;
padding: 10px 20px;
}
.nav .navObject span{
display: none;
}
.nav .btn{
position: absolute;
top: 10%;
right: -10%;
width: 30px;
height: 30px;
border-radius: 50%;
border : 1px solid #000000;
/*box-shadow: -2px -3px 6px rgba(255,255,255,0.9);*/
transform: rotate(0deg);
z-index: 10;
}
.nav .btn button{
width: 100%;
height: 100%;
border-radius: 50%;
outline: none;
border: 1px solid #fff;
background: #fff;
color: #000000;
}
.nav.active{
position: relative;
width: 300px;
height: 200px;
/* display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;*/
background: #000000;
box-shadow: 1px 1px 8px rgba(255,255,255,0.6);
/* top: 50%;
left: 50%;
transform: translateX(-50%) translateY(50%);
color: #fff;
padding: 12px 12px;
border-radius: 12px;*/
}
.nav.active .navObject{
width: 180px;
height: auto;
display: flex;
flex-direction: row;
text-align: center;
margin-left: 20px;
padding: 12px;
}
.nav.active .navObject span{
display: block;
margin-left: 14px;
}
.nav.active .btn{
transform: rotate(180deg);
right: -15px;
border: 1px solid #000000;
}
.navObject:hover{
background: #fff;
color: #000000;
}
function navOpen(){
const nav = document.querySelector('.nav');
nav.classList.toggle('active');
}
This Pen doesn't use any external JavaScript resources.