Jump to content

Como criar uma linha animada e dinâmica que acompanha o menu em JavaScript e CSS?

jcvilanova

Por jcvilanova
em JavaScript

 Compartilhar
Ir para a Solução Solucionado por frankhosaka,

Postagens Recomendadas

jcvilanova

jcvilanova

Postado
Postado

Pessoal, gostaria de saber como se faz isso. Essa linha pega de um lado a outro da pagina, separando a divi que contem o navbar. Interessante é que tem um marcador, como se fosse a ponta de um triangulo apontando para o primeiro item de menu. Quando voce clica nos outros itens de menu essa ponta acompanha., saindo do menu onde o ponteiro do mouse estava anteriormente e passando para o atual. Já procurei de todo jeito mas nao econtrei nada parecido, nem a respeito de como se faz essa linha e nem como animar à medida que o mouse muda de um menu para o outro. 

 

 

Menu dina.png

  • Curtir 1
  • Solução
frankhosaka

frankhosaka

Postado
  • Solução
Postado

Usei o copilot.microsoft.com, e o melhor que consegui foi isso: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar com Linha Indicadora Dinâmica</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .indicator {
            position: absolute;
            bottom: 0;
            height: 4px;
            background: black;
            transition: left 0.3s ease, width 0.3s ease;
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <nav class="relative flex justify-center space-x-8">
        <a href="#" class="nav-item text-gray-700 hover:text-black" data-index="0">Item 1</a>
        <a href="#" class="nav-item text-gray-700 hover:text-black" data-index="1">Item 2</a>
        <a href="#" class="nav-item text-gray-700 hover:text-black" data-index="2">Item 3</a>
        <div id="indicator" class="indicator"></div>
    </nav>
    <script>
        const navItems = document.querySelectorAll('.nav-item');
        const indicator = document.getElementById('indicator');
        const nav = document.querySelector('nav');

        navItems.forEach((item, index) => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const itemWidth = item.offsetWidth;
                const itemLeft = item.offsetLeft - nav.offsetLeft - 16;
                indicator.style.width = `${itemWidth}px`;
                indicator.style.left = `${itemLeft}px`;
                navItems.forEach(navItem => navItem.classList.remove('active'));
                item.classList.add('active');
            });
        });
    </script>
</body>
</html>

 

  • Ajudou! 1
frankhosaka

frankhosaka

Postado
Postado

Aqui um outro exemplo, a ideia foi minha, mas turbinado pelo Copilot: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar com Delta Indicador</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .delta-indicador::after {
            content: '';
            display: block;
            position: absolute;
            top: 100%; /* Posiciona o triângulo abaixo do item */
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid black; /* Cor do triângulo */
        }
    </style>
    <script>
        function borda(itemId) {
            const items = document.querySelectorAll('.nav-item');
            items.forEach(item => item.classList.remove('delta-indicador'));
            document.getElementById(itemId).classList.add('delta-indicador');
        }
    </script>
</head>
<body class="flex w-1/2 m-auto">
    <div id="item1" class="nav-item relative w-1/4 p-4 m-auto text-center" onclick="borda('item1')">
        Item 1
    </div>
    <div id="item2" class="nav-item relative w-1/4 p-4 m-auto text-center" onclick="borda('item2')">
        Item 2
    </div>
    <div id="item3" class="nav-item relative w-1/4 p-4 m-auto text-center" onclick="borda('item3')">
        Item 3
    </div>
    <div id="item4" class="nav-item relative w-1/4 p-4 m-auto text-center" onclick="borda('item4')">
        Item 4
    </div>
</body>
</html>

 

  • Ajudou! 1
jcvilanova

jcvilanova

Postado
  • Autor(a)
Postado

Problema resolvido 

var icone = document.querySelectorAll(".icone");

icone.forEach((icone, index) => {

    icone.addEventListener("mouseover", () => {

        document.querySelector(".active").classList.remove("active");

       icone.classList.add("active");

        var indicador = document.querySelector(".indicador")

        indicador.style.left = `${index * 93 + 48}px`

    } )

})
  • Curtir 1
frankhosaka

frankhosaka

Postado
Postado
1 hora atrás, jcvilanova disse:

 

Problema resolvido

 

var icone = document.querySelectorAll(".icone");

icone.forEach((icone, index) => {

    icone.addEventListener("mouseover", () => {

        document.querySelector(".active").classList.remove("active");

       icone.classList.add("active");

        var indicador = document.querySelector(".indicador")

        indicador.style.left = `${index * 93 + 48}px`

    } )

})

Muito bom. Pedi para o Copilot aproveitar a sua ideia, e montar um código teste completo:

  

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Teste de Ícones</title>
    <style>
        .icone {
            width: 50px;
            height: 50px;
            background-color: gray;
            margin: 10px;
            display: inline-block;
            cursor: pointer;
            position: relative;
        }
        .active {
            background-color: blue;
        }
        .indicador {
            position: absolute;
            width: 50px;
            height: 5px;
            background-color: red;
            transition: left 0.3s;
            top: 80px; /* Aumente este valor para aumentar a distância */
        }
        .container {
            position: relative;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="icone active"></div>
        <div class="icone"></div>
        <div class="icone"></div>
        <div class="icone"></div>
        <div class="indicador"></div>
    </div>
    
    <script>
        var icones = document.querySelectorAll(".icone");
        var indicador = document.querySelector(".indicador");
        
        function atualizarIndicador() {
            var iconeAtivo = document.querySelector(".icone.active");
            var leftPosition = iconeAtivo.offsetLeft;
            indicador.style.left = leftPosition + "px";
        }

        icones.forEach((icone, index) => {
            icone.addEventListener("mouseover", () => {
                document.querySelector(".active").classList.remove("active");
                icone.classList.add("active");
                atualizarIndicador();
            });
        });

        // Posicionar indicador na carga inicial
        atualizarIndicador();
    </script>
</body>
</html>

 

  • Ajudou! 1
  • Casa do Desenvolvedor mudou o título para Como criar uma linha animada e dinâmica que acompanha o menu em JavaScript e CSS?

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...