<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Mobile Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="main">
<div class="bar"> <img class="bar__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMzgsMTRsMCw4bC0yNi4zNCwwbDcu%0D%0AMTcsLTcuMTdsLTIuODMsLTIuODNsLTEyLDEybDEyLDEybDIuODMsLTIuODNsLTcuMTcsLTcuMTds%0D%0AMzAuMzQsMGwwLC0xMmwtNCwweiIvPgogPC9nPgo8L3N2Zz4="/><img class="bar__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjQsMTZjMi4yMSwwIDQsLTEuNzkg%0D%0ANCwtNHMtMS43OSwtNCAtNCwtNHMtNCwxLjc5IC00LDRzMS43OSw0IDQsNHptMCw0Yy0yLjIxLDAg%0D%0ALTQsMS43OSAtNCw0czEuNzksNCA0LDRzNCwtMS43OSA0LC00cy0xLjc5LC00IC00LC00em0wLDEy%0D%0AYy0yLjIxLDAgLTQsMS43OSAtNCw0czEuNzksNCA0LDRzNCwtMS43OSA0LC00cy0xLjc5LC00IC00%0D%0ALC00eiIvPgogPC9nPgo8L3N2Zz4="/></div>
<div class="menu">
<div class="menu__item" id="0-0"> <img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTIwLDQwbDAsLTEybDgsMGwwLDEybDEwLDBsMCwt%0D%0AMTZsNiwwbC0yMCwtMThsLTIwLDE4bDYsMGwwLDE2bDEwLDB6Ii8+CiA8L2c+Cjwvc3ZnPg=="/>
<div class="menu__content"><span class="menu__span">HOME</span><span class="menu__span">HOME</span></div>
</div>
<div class="menu__item" id="1-0"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjQsNDIuN2wtMi45LC0yLjYzYy0x%0D%0AMC4zLC05LjM1IC0xNy4xLC0xNS41MiAtMTcuMSwtMjMuMDdjMCwtNi4xNyA0LjgzLC0xMSAxMSwt%0D%0AMTFjMy40OCwwIDYuODIsMS42MiA5LDQuMTdjMi4xOCwtMi41NSA1LjUyLC00LjE3IDksLTQuMTdj%0D%0ANi4xNywwIDExLDQuODMgMTEsMTFjMCw3LjU1IC02LjgsMTMuNzIgLTE3LjEsMjMuMDdsLTIuOSwy%0D%0ALjYzeiIvPgogPC9nPgo8L3N2Zz4="/>
<div class="menu__content"><span class="menu__span">LIKES</span><span class="menu__span">LIKES</span></div>
</div>
<div class="menu__item" id="0-1"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjAsNDBsOCwwbDAsLTMybC04LDBs%0D%0AMCwzMnptLTEyLDBsOCwwbDAsLTE2bC04LDBsMCwxNnptMjQsLTIybDAsMjJsOCwwbDAsLTIybC04%0D%0ALDB6Ii8+CiA8L2c+Cjwvc3ZnPg=="/>
<div class="menu__content"><span class="menu__span">STATS</span><span class="menu__span">STATS</span></div>
</div>
<div class="menu__item" id="1-1"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtNDIsMzhsMCwtMjhjMCwtMi4yMSAt%0D%0AMS43OSwtNCAtNCwtNGwtMjgsMGMtMi4yMSwwIC00LDEuNzkgLTQsNGwwLDI4YzAsMi4yMSAxLjc5%0D%0ALDQgNCw0bDI4LDBjMi4yMSwwIDQsLTEuNzkgNCwtNHptLTI1LC0xMWw1LDYuMDFsNywtOS4wMWw5%0D%0ALDEybC0yOCwwbDcsLTl6Ii8+CiA8L2c+Cjwvc3ZnPg=="/>
<div class="menu__content"><span class="menu__span">PICTURES</span><span class="menu__span">PICTURES</span></div>
</div>
<div class="menu__item" id="0-2"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTQuMDIsNDJsNDEuOTgsLTE4bC00MS45OCwtMThs%0D%0ALTAuMDIsMTRsMzAsNGwtMzAsNGwwLjAyLDE0eiIvPgogPC9nPgo8L3N2Zz4="/>
<div class="menu__content"><span class="menu__span">SHARE</span><span class="menu__span">SHARE</span></div>
</div>
<div class="menu__item" id="1-2"><img class="menu__icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMzguODYsMjUuOTVjMC4wOCwtMC42%0D%0ANCAwLjE0LC0xLjI5IDAuMTQsLTEuOTVzLTAuMDYsLTEuMzEgLTAuMTQsLTEuOTVsNC4yMywtMy4z%0D%0AMWMwLjM4LC0wLjMgMC40OSwtMC44NCAwLjI0LC0xLjI4bC00LC02LjkzYy0wLjI1LC0wLjQzIC0w%0D%0ALjc3LC0wLjYxIC0xLjIyLC0wLjQzbC00Ljk4LDIuMDFjLTEuMDMsLTAuNzkgLTIuMTYsLTEuNDYg%0D%0ALTMuMzgsLTEuOTdsLTAuNzUsLTUuM2MtMC4wOSwtMC40NyAtMC41LC0wLjg0IC0xLC0wLjg0bC04%0D%0ALDBjLTAuNSwwIC0wLjkxLDAuMzcgLTAuOTksMC44NGwtMC43NSw1LjNjLTEuMjIsMC41MSAtMi4z%0D%0ANSwxLjE3IC0zLjM4LDEuOTdsLTQuOTgsLTIuMDFjLTAuNDUsLTAuMTcgLTAuOTcsMCAtMS4yMiww%0D%0ALjQzbC00LDYuOTNjLTAuMjUsMC40MyAtMC4xNCwwLjk3IDAuMjQsMS4yOGw0LjIyLDMuMzFjLTAu%0D%0AMDgsMC42NCAtMC4xNCwxLjI5IC0wLjE0LDEuOTVzMC4wNiwxLjMxIDAuMTQsMS45NWwtNC4yMiwz%0D%0ALjMxYy0wLjM4LDAuMyAtMC40OSwwLjg0IC0wLjI0LDEuMjhsNCw2LjkzYzAuMjUsMC40MyAwLjc3%0D%0ALDAuNjEgMS4yMiwwLjQzbDQuOTgsLTIuMDFjMS4wMywwLjc5IDIuMTYsMS40NiAzLjM4LDEuOTds%0D%0AMC43NSw1LjNjMC4wOCwwLjQ3IDAuNDksMC44NCAwLjk5LDAuODRsOCwwYzAuNSwwIDAuOTEsLTAu%0D%0AMzcgMC45OSwtMC44NGwwLjc1LC01LjNjMS4yMiwtMC41MSAyLjM1LC0xLjE3IDMuMzgsLTEuOTds%0D%0ANC45OCwyLjAxYzAuNDUsMC4xNyAwLjk3LDAgMS4yMiwtMC40M2w0LC02LjkzYzAuMjUsLTAuNDMg%0D%0AMC4xNCwtMC45NyAtMC4yNCwtMS4yOGwtNC4yMiwtMy4zMXptLTE0Ljg2LDUuMDVjLTMuODcsMCAt%0D%0ANywtMy4xMyAtNywtN3MzLjEzLC03IDcsLTdzNywzLjEzIDcsN3MtMy4xMyw3IC03LDd6Ii8+CiA8%0D%0AL2c+Cjwvc3ZnPg=="/>
<div class="menu__content"><span class="menu__span">SETTINGS</span><span class="menu__span">SETTINGS</span></div>
</div>
<div class="is-active" id="current"></div>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
/* variables */
/* Reset */
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Generic */
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
font-family: 'Poppins', sans-serif;
font-size: 11px;
letter-spacing: 1px;
background: #F0EDFD;
color: #FFFFFF;
user-select: none;
}
/**/
.main {
display: flex;
flex-direction: column;
width: 300px;
height: auto;
padding: 10px;
background: #7B49DD;
border-radius: 30px;
box-shadow: 0 0 40px 5px rgba(123, 73, 221, 0.25);
}
.bar {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 50px;
padding: 10px 0px;
margin-bottom: 10px;
}
.bar__icon {
width: 40px;
height: 40px;
object-fit: contain;
padding: 10px;
background: #6b34d9;
border-radius: 50%;
}
.menu {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 420px;
position: relative;
}
.menu__item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 140px;
height: 140px;
cursor: pointer;
background: transparent;
z-index: 100;
transition: 150ms;
}
.menu__item:hover .menu__icon {
animation: icon .1s 4;
}
.menu__item:hover .menu__span {
transform: translateY(-17px);
transition: 300ms;
}
.menu__icon {
width: 25px;
height: 25px;
object-fit: contain;
margin: 2px;
}
.menu__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
width: 100%;
height: 18px;
overflow: hidden;
}
/**/
.is-active {
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 140px;
background: #6b34d9;
transition: 200ms;
border-radius: 20px;
}
@keyframes icon {
0% {
transform: rotateZ(-10deg);
}
100% {
transform: rotateZ(10deg);
}
}
/* Const */
const menuItem = document.querySelectorAll(".menu__item");
const currentItem = document.querySelector("#current");
const mov = 140;
/* Func */
let getItem = (event) => {
let x = event.currentTarget.id.slice("-")[0];
let y = event.currentTarget.id.slice("-")[2];
currentItem.style.left = `${ x * mov }px`;
setTimeout( () => currentItem.style.top = `${ y * mov }px`, 200 ) ;
}
/* Main */
let mainFunction = (event) => {
for (var i = 0; i < menuItem.length; i++) {
menuItem[i].addEventListener("click", getItem);
}
}
window.addEventListener("load", mainFunction);