Webleb - Snippet di Codice - Indicatore del menu di navigazione

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;
}

Indicatore del menu di navigazione

Consigliato

Modello HTML della dashboard di amministrazione

Un codice di Mete Han

HTML

CSS

JS

Consigliato

Modello HTML della dashboard di amministrazione

Un codice di Mete Han

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS