<body>
<aside id="left-menu">
<h2>Radiant Play</h2>
<nav class="nav-menu">
<ul>
<li><a class="menu-link active"><i class="fas fa-gamepad"></i>Играть</a></li>
<li><a class="menu-link"><i class="fas fa-users"></i>Мои рефералы</a></li>
<li><a class="menu-link"><i class="fas fa-star"></i>Премиум аккаунт</a></li>
<li> <a class="menu-link"><i class="fas fa-headset"></i>Тех. Поддержка</a></li>
</ul>
</nav>
<a id="exit-button">Выход</a>
</aside>
</body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: 'Gilroy';
}
body {
display: flex;
user-select: none;
background: #fff;
padding-right: 5vmin;
}
/* ---------- Левое меню ---------- */
#left-menu {
top: 0;
height: 100vh;
padding: 0 4vmin;
position: sticky;
background: #f1f2f4;
margin-right: 5vmin;
box-shadow: 3px 0px 5px 0px #E8E8E8;
}
#left-menu h2 {
color: #333;
display: flex;
margin: 5vmin 0;
font-size: 4vmin;
justify-content: center;
}
#left-menu nav {
display: flex;
flex-direction: column;
}
#left-menu nav .menu-link {
color: #333;
flex-grow: 1;
display: block;
cursor: pointer;
font-weight: 600;
transition: 0.3s;
font-size: 2.1vmin;
border-radius: 1vmin;
margin-bottom: 2vmin;
padding: 2vmin 4vmin;
text-decoration: none;
}
#left-menu nav .menu-link i {
width: 4vmin;
}
#left-menu #exit-button {
left: 0;
color: #333;
width: 100%;
bottom: 5vmin;
display: flex;
cursor: pointer;
font-weight: 600;
font-size: 2.3vmin;
position: absolute;
justify-content: center;
}
ul {
list-style: none;
}
ul li {
padding: 0;
width: 100%;
height: 100%;
}
.nav-menu {
position: relative;
}
.menu-link {
position: relative;
z-index: 3;
}
.menu-sliding {
height: 100%;
widt: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
color: #FFF;
background: #ff4949;
border-radius: 6px;
box-shadow: 0px 8px 25px -15px #FF4949;
}const menulink = document.querySelectorAll('.menu-link')
menulink.forEach(link => {
link.addEventListener('click', () => {
menulink.forEach(item => {
item.classList.remove('active');
})
link.classList.remove('hover');
link.classList.add('active');
})
link.addEventListener('mouseover', () => {
if (!link.classList.contains('active')) {
link.classList.add('hover');
}
})
link.addEventListener('mouseout', () => {
if (link.classList.contains('hover')) {
link.classList.remove('hover');
}
})
})
var $menu = $('.nav-menu');
var $items = $menu.find('.menu-link');
new SlidingMenu({
'itemActiveClass': 'active',
'slidingClass': '',
'duration': 400,
'direction': 'y',
'menu': $menu,
'items': $items
});
External CSS
This Pen doesn't use any external CSS resources.