Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
:root {
--color-primary: #1380b8;
--color-secondary: #33ace3;
}
body {
margin: 10px;
background-color: rgb(51 172 227 / 20%);
font-family: sans-serif;
}
/* SideBar */
aside.side-bar-wrap {
--radius-size: 25px;
height: 98vh;
position: fixed;
top: 1vh;
left: 1vh;
overflow-y: scroll;
overflow-x: hidden;
border-radius: var(--radius-size);
padding-right: 2px;
}
aside.side-bar-wrap::-webkit-scrollbar {
width: 10px;
}
aside.side-bar-wrap::-webkit-scrollbar-track {
background-color: transparent;
}
aside.side-bar-wrap::-webkit-scrollbar-thumb {
border-radius: var(--radius-size);
background-color: var(--color-primary);
}
nav.side-bar {
min-height: 100%;
background-color: var(--color-primary);
display: inline-block;
border-left: var(--radius-size) solid var(--color-secondary);
border-right: var(--radius-size) solid var(--color-primary);
border-radius: var(--radius-size);
}
nav.side-bar .logo-area {
--curve-size: calc(2 * var(--radius-size));
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
min-height: var(--curve-size);
background-color: var(--color-secondary);
border-radius: 0 var(--radius-size) var(--radius-size) 0;
box-shadow: var(--radius-size) 0 var(--color-secondary);
}
nav.side-bar .logo-area::after {
content: '';
width: var(--curve-size);
height: var(--curve-size);
background-color: var(--color-primary);
border-radius: 50%;
position: absolute;
bottom: calc(-1 * var(--curve-size));
left: 0;
box-shadow: calc(-1 * var(--curve-size) * 0.5) calc(-1 * var(--curve-size) * 0.5) var(--color-secondary);
}
nav.side-bar .logo-area img {
position: absolute;
max-height: 75%;
transition-duration: 1s;
}
aside.side-bar-wrap:hover nav.side-bar .logo-area img.min {
max-height: 0;
opacity: 0;
}
nav.side-bar .logo-area img.max {
max-width: 0;
opacity: 0;
transition-duration: 1s;
}
aside.side-bar-wrap:hover nav.side-bar .logo-area img.max {
max-width: 90%;
opacity: 1;
}
nav.side-bar ul {
padding: 0;
margin: calc(2 * var(--radius-size)) 0;
display: flex;
flex-direction: column;
}
nav.side-bar ul li {
height: 50px;
padding: 10px var(--radius-size);
list-style: none;
border-radius: var(--radius-size);
margin-bottom: var(--radius-size);
z-index: 1;
}
nav.side-bar ul li:not(.active) {
z-index: 2;
}
nav.side-bar ul li:not(.active):hover {
backdrop-filter: brightness(0.85);
}
nav.side-bar ul li.active {
position: relative;
background-color: var(--color-secondary);
border-radius: 0 var(--radius-size) var(--radius-size) 0;
}
nav.side-bar ul li.active::before,
nav.side-bar ul li.active::after {
--curve-size: calc(2 * var(--radius-size));
content: '';
width: var(--curve-size);
height: var(--curve-size);
background-color: var(--color-primary);
border-radius: 50%;
position: absolute;
}
nav.side-bar ul li.active::before {
top: calc(-1 * var(--curve-size));
left: 0;
box-shadow: calc(-1 * var(--curve-size) * 0.5) calc(var(--curve-size) * 0.5) var(--color-secondary);
}
nav.side-bar ul li.active::after {
bottom: calc(-1 * var(--curve-size));
left: 0;
box-shadow: calc(-1 * var(--curve-size) * 0.5) calc(-1 * var(--curve-size) * 0.5) var(--color-secondary);
}
nav.side-bar ul li a{
color: white;
font-size: 16pt;
width: 100%;
height: 100%;
display: flex;
gap: 0;
align-items: center;
text-decoration: none;
transition: 1s;
}
aside:hover nav.side-bar ul li a{
gap: 10px;
}
nav.side-bar ul li a span {
display: flex;
transition: 0.75s cubic-bezier(0.39, 0.58, 0.57, 1);
}
nav.side-bar ul li a span.icon {
font-size: 24pt;
}
nav.side-bar ul li a span.title {
max-width: 0;
opacity: 0;
}
aside:hover nav.side-bar ul li a span.title {
width: auto;
max-width: 10rem;
opacity: 1;
}
</style>
</head>
<body>
<script src="http://www.devanswer.com/codes/files/ionicons.js"></script>
<aside class="side-bar-wrap">
<nav class="side-bar">
<div class="logo-area">
<p>Logo</p>
</div>
<ul>
<li class="active">
<a href="https://devanswer.com">
<span class="icon">
<ion-icon name="home-outline"></ion-icon>
</span>
<span class="title">Home</span>
</a>
</li>
<li>
<a href="https://devanswer.com">
<span class="icon">
<ion-icon name="newspaper-outline"></ion-icon>
</span>
<span class="title">News</span>
</a>
</li>
<li>
<a href="https://devanswer.com">
<span class="icon">
<ion-icon name="chatbox-ellipses-outline"></ion-icon>
</span>
<span class="title">Messages</span>
</a>
</li>
<li>
<a href="https://devanswer.com">
<span class="icon">
<ion-icon name="headset-outline"></ion-icon>
</span>
<span class="title">Musics</span>
</a>
</li>
<li>
<a href="https://devanswer.com">
<span class="icon">
<ion-icon name="play-outline"></ion-icon>
</span>
<span class="title">Videos</span>
</a>
</li>
</ul>
</nav>
</aside><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
const initNavBar = () => {
const menusEl = document.querySelectorAll('.side-bar ul li')
menusEl.forEach(menu => menu.addEventListener('click', ()=> {
const menuActiveEl = document.querySelector('.side-bar ul li.active')
menuActiveEl.classList.remove('active')
menu.classList.add('active')
}))
}
initNavBar()
</script>
</body>
</html>
