Menú de navegación mágica | code_wars_official

1629 Andev.web

Abrir en el editor Publica tu código

Menú de navegación mágica | code_wars_official

Recomendado

21 October 2024

Entradas de un solo dígito con un elemento

30 October 2025

Código HTML de la animación de carga de ojos CSS

24 November 2024

Tienda de zapatos

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="navigation">
        <ul>
            <li class="list active">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="text">Home</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="person-outline"></ion-icon>
                    </span>
                    <span class="text">Profile</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="chatbubble-outline"></ion-icon>
                    </span>
                    <span class="text">Message</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="image-outline"></ion-icon>
                    </span>
                    <span class="text">Photos</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="settings-outline"></ion-icon>
                    </span>
                    <span class="text">Settings</span>
                </a>
            </li>
            <div class="indicator"></div>
        </ul>
    </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}
:root
{
    --clr:#151F28;

}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--clr);
}
.navigation
{
    width: 400px;
    height: 70px;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.navigation ul
{
    display: flex;
    width: 350px;
}
.navigation ul li
{
    position: relative;
    list-style: none;
    width: 70px;
    height: 70px;
    z-index: 1;
}
.navigation ul li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
}
.navigation ul li a .icon
{
    position: relative;
    display: block;
    line-height: 75px;
    font-size: 1.5rem;
    text-align: center;
    transition: 0.5s;
    color: var(--clr);
}
.navigation ul li.active a .icon
{
    transform: translateY(-32px);
}
.navigation ul li a .text
{
    position: absolute;
    color: var(--clr);
    font-weight: 400;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(20px);
}
.navigation ul li.active a .text
{
    transform: translateY(10px);
    opacity: 1;
}
.indicator
{
    position: absolute;
    top: -50%;
    width: 70px;
    height: 70px;
    background: #29fd53;
    border-radius: 50%;
    border: 6px solid var(--clr);
    transition: 0.5s;
}
.indicator::before
{
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 1px -10px 0 0 var(--clr);
}
.indicator::after
{
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: -1px -10px 0 0 var(--clr);
}
.navigation ul li:nth-child(1).active ~ .indicator
{
    transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator
{
    transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator
{
    transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator
{
    transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator
{
    transform: translateX(calc(70px * 4));
}

Recomendado

Entradas de un solo dígito con un elemento

Código HTML de la animación de carga de ojos CSS

Tienda de zapatos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS