nav.menu
    
    a#i-0.menu__item
        div.menu__c.menu__c--top
            span.menu__text HOME
            img.menu__icon(src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9%0D%0AIjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPGc+DQoJPHBhdGggaWQ9InN2Z18xIiBmaWxsPSJub25lIiBzdHJva2U9IiMw%0D%0AMDRGRjAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjAsNDBW%0D%0AMjhoOHYxMmgxMFYyNGg2TDI0LDZMNCwyNGg2djE2DQoJCUgyMHoiLz4NCjwvZz4NCjwvc3ZnPg0K")
        div.menu__c
            img.menu__icon(src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9%0D%0AIjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPGc+DQoJPHBhdGggaWQ9InN2Z18xIiBmaWxsPSJub25lIiBzdHJva2U9IiMw%0D%0AMDRGRjAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjAsNDBW%0D%0AMjhoOHYxMmgxMFYyNGg2TDI0LDZMNCwyNGg2djE2DQoJCUgyMHoiLz4NCjwvZz4NCjwvc3ZnPg0K")
    a#i-1.menu__item
        div.menu__c.menu__c--top
            span.menu__text LIKES
            img.menu__icon(src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9%0D%0AIjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPg0KPHRpdGxlPkxheWVyIDE8L3Rp%0D%0AdGxlPg0KPHBhdGggaWQ9InN2Z18yIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDRGRjAiIHN0cm9r%0D%0AZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjQsNDIuN2wtMi45LTIuNjMN%0D%0ACglDMTAuOCwzMC43Miw0LDI0LjU1LDQsMTdDNCwxMC44Myw4LjgzLDYsMTUsNmMzLjQ4LDAsNi44%0D%0AMiwxLjYyLDksNC4xN0MyNi4xOCw3LjYyLDI5LjUyLDYsMzMsNmM2LjE3LDAsMTEsNC44MywxMSwx%0D%0AMQ0KCWMwLDcuNTUtNi44LDEzLjcyLTE3LjEsMjMuMDdMMjQsNDIuN3oiLz4NCjwvc3ZnPg0K")
        div.menu__c
            img.menu__icon(src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9%0D%0AIjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPg0KPHRpdGxlPkxheWVyIDE8L3Rp%0D%0AdGxlPg0KPHBhdGggaWQ9InN2Z18yIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDRGRjAiIHN0cm9r%0D%0AZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjQsNDIuN2wtMi45LTIuNjMN%0D%0ACglDMTAuOCwzMC43Miw0LDI0LjU1LDQsMTdDNCwxMC44Myw4LjgzLDYsMTUsNmMzLjQ4LDAsNi44%0D%0AMiwxLjYyLDksNC4xN0MyNi4xOCw3LjYyLDI5LjUyLDYsMzMsNmM2LjE3LDAsMTEsNC44MywxMSwx%0D%0AMQ0KCWMwLDcuNTUtNi44LDEzLjcyLTE3LjEsMjMuMDdMMjQsNDIuN3oiLz4NCjwvc3ZnPg0K")
    a#i-2.menu__item
        div.menu__c.menu__c--top
            span.menu__text PROFILE
            img.menu__icon(src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9%0D%0AIjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPg0KPGc+DQoJPHRpdGxlPkxheWVy%0D%0AIDE8L3RpdGxlPg0KCTxwYXRoIGlkPSJzdmdfMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDA0RkYw%0D%0AIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTI0LDhjLTQuNDIs%0D%0AMC04LDMuNTgtOCw4DQoJCWMwLDQuNDEsMy41OCw4LDgsOHM4LTMuNTksOC04QzMyLDExLjU4LDI4%0D%0ALjQyLDgsMjQsOHogTTI0LDI4Yy01LjMzLDAtMTYsMi42Ny0xNiw4djRoMzJ2LTRDNDAsMzAuNjcs%0D%0AMjkuMzMsMjgsMjQsMjh6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==")
        div.menu__c
            img.menu__icon(src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9%0D%0AIjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPg0KPGc+DQoJPHRpdGxlPkxheWVy%0D%0AIDE8L3RpdGxlPg0KCTxwYXRoIGlkPSJzdmdfMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDA0RkYw%0D%0AIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTI0LDhjLTQuNDIs%0D%0AMC04LDMuNTgtOCw4DQoJCWMwLDQuNDEsMy41OCw4LDgsOHM4LTMuNTksOC04QzMyLDExLjU4LDI4%0D%0ALjQyLDgsMjQsOHogTTI0LDI4Yy01LjMzLDAtMTYsMi42Ny0xNiw4djRoMzJ2LTRDNDAsMzAuNjcs%0D%0AMjkuMzMsMjgsMjQsMjh6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==")
    a#i-3.menu__item
        div.menu__c.menu__c--top
            span.menu__text SHARE
            img.menu__icon(src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9%0D%0AIjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDA0RkYwIiBzdHJva2Utd2lk%0D%0AdGg9IjMiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEuOTQxLDQybDQxLjk4LTE4TDEuOTQx%0D%0ALDZsLTAuMDIsMTRsMzAsNGwtMzAsNA0KCUwxLjk0MSw0MnoiLz4NCjxwYXRoIGZpbGw9Im5vbmUi%0D%0AIGQ9Ik0wLDBoNDh2NDhIMFYweiIvPg0KPC9zdmc+DQo=")
        div.menu__c
            img.menu__icon(src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9%0D%0AIjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDA0RkYwIiBzdHJva2Utd2lk%0D%0AdGg9IjMiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEuOTQxLDQybDQxLjk4LTE4TDEuOTQx%0D%0ALDZsLTAuMDIsMTRsMzAsNGwtMzAsNA0KCUwxLjk0MSw0MnoiLz4NCjxwYXRoIGZpbGw9Im5vbmUi%0D%0AIGQ9Ik0wLDBoNDh2NDhIMFYweiIvPg0KPC9zdmc+DQo=")

    div#active-1.active
    div#active-2.active
    div#active-3.active
View Compiled
/* Variables */
$blue: #004FF0;
$white: #ffffff;
/* Reset */
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* Generic */
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    background: $blue;
    user-select: none;
}
a{
    font-size: 9px;
    font-weight: bold;
    text-decoration: none;
    color: $blue;
    letter-spacing: .25px;
}
/**/
#active-1,
#active-2,
#active-3{
    position: absolute;
    bottom: -22px;
    left: -100px;
    height: 30px;
    width: 30px;
    background: $blue;
    border-radius: 50%;
    transition: .5s ease-out;
}
#active-2{ transition-delay: .02s;}
#active-3{ transition-delay: .04s;}
/**/
.menu{
    display: flex;
    align-items: center;
    position: relative;
    height: 65px;
    overflow: hidden;
    background: $white;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(black, .25);

    &__item{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        width: 40px;
        height: 40px;
        margin: 10px;
        overflow: hidden;
    }
    &__c{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-shrink: 0;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        transform: translateY(-40px);
        &:hover{ animation: item .25s ease-in-out 1; }
        &--top{ &:hover{ animation: none; } }
    }
    &__icon{
        width: 22px;
        height: 22px;
        object-fit: contain;
    }
}
/**/
.is-c-translate{
    transform: translateY(0px);
    transition: .5s ease-in-out .35s;
}
@keyframes item {
    0%, 100%{ transform: translateY(-40px);}
    50%{ transform: translateY(-36px);}
}
View Compiled
const item = document.querySelectorAll(".menu__item");
const menu = document.querySelectorAll(".menu__c");
const active = document.querySelectorAll(".active");

/* */
let getItem = (event) => {
    removeMenu();
    let indexItem = event.currentTarget.id;
    indexItem = indexItem.split("i-").join("");
    for (var i = 0; i < active.length; i++) {
        active[i].style.left = `${(indexItem * 60) + 15}px`;
    }
    event.currentTarget.children[0].classList.add("is-c-translate");
    event.currentTarget.children[1].classList.add("is-c-translate");
}

let removeMenu = (event) => {
    for (var i = 0; i < menu.length; i++) {
        menu[i].classList.remove("is-c-translate");
    }
}
/* */
let mainFunc = (event) =>{
    for (var i = 0; i < item.length; i++) {
        item[i].addEventListener("click", getItem);
    }
}
/* */
window.addEventListener("load", mainFunc);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.