<div id="nav-1">

    <ul class="nav">
        <li class="slide1"></li>
        <li class="slide2"></li>
        <li><a class="active" href="#/">Alpha</a></li>
        <li><a href="#/">Beta</a></li>
        <li><a href="#/">Gamma</a></li>
        <li><a href="#/">Delta</a></li>
        <li><a href="#/">Epsilon</a></li>
    </ul>

</div>
#nav-1 {
    .nav {
        position: relative;
        border: none;
        border-radius: 10em;
        display: flex;
        list-style: none;
        background: #f5f5f5;
        box-shadow: 20px 40px 50px #00000044;
        padding: 10px;
        li {
            margin: 0px;
            a {
                position: relative;
                padding: 0.6em 2em;
                font-size: 18px;
                border: none;
                color: #333;
                display: inline-block;
                text-decoration: none;
                z-index: 3;
                &:focus {
                    outline: 1px solid #4567b2;
                    border-radius: 10em;
                }
            }
        }
    }
    .slide1,
    .slide2 {
        position: absolute;
        display: inline-block;
        height: 3em;
        border-radius: 10em;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1.05);
    }
    .nav .slide1 {
        background-color: yellowgreen;
        z-index: 2;
    }
    .nav .slide2 {
        opacity: 0;
        background: #fff;
        border: 1px solid #8ab9ff;
        z-index: 1;
    }
}

.squeeze {
    transition: all 1.5s;
    transform: scale(0.9);
}

// *************************************** Demo stuff

*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0e0e0;
    font-family: Montserrat, sans-serif;
    line-height: 1.5;
    background: linear-gradient(
        160deg,
        #4567b2 20%,
        #8ab9ff 20%,
        #8ab9ff 80%,
        #4567b2 80%
    );
}
View Compiled
$("#nav-1 a").on("click", function() {
    var position = $(this)
        .parent()
        .position();
    var width = $(this)
        .parent()
        .width();
    $("#nav-1 .slide1").css({ opacity: 1, left: +position.left, width: width });
});

$("#nav-1 a").on("mouseover", function() {
    var position = $(this)
        .parent()
        .position();
    var width = $(this)
        .parent()
        .width();
    $("#nav-1 .slide2")
        .css({
            opacity: 1,
            left: +position.left,
            width: width
        })
        .addClass("squeeze");
});

$("#nav-1 a").on("mouseout", function() {
    $("#nav-1 .slide2")
        .css({ opacity: 0 })
        .removeClass("squeeze");
});

var currentWidth = $("#nav-1 .nav")
    .find(".active")
    .parent("li")
    .width();
var current = $(".nav .active").position();
$("#nav-1 .slide1").css({ left: +current.left, width: currentWidth });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js