Webleb - Code-Snippets - Navigationsmenüanzeige

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

Navigationsmenüanzeige

Empfohlen

Ein Code von Codex

Ein Code von lebdev

Ein Code von Mete

HTML

CSS

JS

Empfohlen

Ein Code von Codex

Ein Code von lebdev

Ein Code von Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS