Webleb - fragmentos de código - Indicador del menú de navegación

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Bar Menu Indiactor</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="nav">
        <ul class="nav_links">
            <li class="nav_link">
                <a href="#"><i class="bx bx-home-alt-2"></i></a>
            </li>
            <li class="nav_link">
                <a href="#"><i class="bx bx-heart"></i></a>
            </li>
            <li class="nav_link">
                <a href="#"><i class="bx bx-plus-circle"></i></a>
            </li>
            <li class="nav_link">
                <a href="#"><i class="bx bx-user"></i></a>
            </li>
            <li class="nav_link">
                <a href="#"><i class="bx bx-bell"></i></a>
            </li>
            <div class="nav_light"></div>
        </ul>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    list-style: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

li {
    display: inline-block;
}

.nav{
    background-color: #191919;
    width: 30em;
    height: 8em;
    border-radius: 20px;
    padding: 0 2em;
    box-shadow: 0 1em 1em rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.nav_links {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.nav_links a {
    color: #fff;
    font-size: 2.5em;
    opacity: 0.5;
    cursor: pointer;
}

.nav_light {
    position: absolute;
    top: 0;
    left: 1.3em;
    background-color: #fff;
    width: 4em;
    height: 0.4em;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    transition: 0.3s;
}

.nav_light::before{
    content: "";
    width: 5em;
    height: 7em;
    position: absolute;
    top: 0.4em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) -50%,
    rgba(255, 255, 255, 0) 90%);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
}

.nav_link.active a {
    opacity: 1;
}

.nav_link.active a .bx-home-alt-2 {
    color: #00f7ff;
    text-shadow: 0 0 15px #00f7ff,
    0 0 30px #00f7ff,
    0 0 45px #00f7ff,
    0 0 60px #00f7ff;
}

.nav_link:nth-child(1).active~.nav_light {
    background-color: #00f7ff;
}

.nav_link.active a .bx-heart {
    color: #ff0000;
    text-shadow: 0 0 15px #ff0000,
    0 0 30px #ff0000,
    0 0 45px #ff0000,
    0 0 60px #ff0000;
}

.nav_link:nth-child(2).active~.nav_light {
    background-color: #ff0000;
}

.nav_link.active a .bx-plus-circle {
    color: #adff2f;
    text-shadow: 0 0 15px #adff2f,
    0 0 30px #adff2f,
    0 0 45px #adff2f,
    0 0 60px #adff2f;
}

.nav_link:nth-child(3).active~.nav_light {
    background-color: #adff2f;
}

.nav_link.active a .bx-user {
    color: #f707f7;
    text-shadow: 0 0 15px #f707f7,
    0 0 30px #f707f7,
    0 0 45px #f707f7,
    0 0 60px #f707f7;
}

.nav_link:nth-child(4).active~.nav_light {
    background-color: #f707f7;
}

.nav_link.active a .bx-bell {
    color: #eeff00;
    text-shadow: 0 0 15px #eeff00,
    0 0 30px #eeff00,
    0 0 45px #eeff00,
    0 0 60px #eeff00;
}

.nav_link:nth-child(5).active~.nav_light {
    background-color: #eeff00;
}

Indicador del menú de navegación

Recomendado

Lista con animaciones

solicitud de citas

Efecto de botón de burbuja

HTML

CSS

JS

Recomendado

Lista con animaciones

solicitud de citas

Efecto de botón de burbuja

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS