WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1402
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
26 January 2025
Um código por Redllowge
17 April 2025
Um código de Metehan
HTML
Copy
Andev Web
Home
Profile
Message
Photos
Settings
CSS
Copy
@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)); }
JS
Copy
const list = document.querySelectorAll('.list'); function activeLink(){ list.forEach((item)=> item.classList.remove('active')); this.classList.add('active'); } list.forEach((item) => item.addEventListener('click',activeLink));