WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Menu de abas em JavaScript com botões redondos
41
saberifardam2
Abrir no Editor
Publique Seu Código
Recomendado
22 May 2025
Controles deslizantes de três figuras 3D
20 April 2025
Um Código de Metehan
5 September 2025
Perfil e notificação animados em CSS
HTML
Copy
Javascript Tab Menu
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --background-color: #bbdefb; --blue-50: #e3f2fd; --blue-100: #bbdefb; --blue-A700: #2962ff; --green-50: #e8f5e9; --green-100: #c8e6c9; --green-A700: #00c853; --purple-50: #f3e5f5; --purple-100: #e1bee7; --purple-A700: #aa00ff; --orange-50: #fff3e0; --orange-100: #ffe0b2; --orange-A700: #ff6d00; --orange-700: #f57c00; --grey-900: #212121; --white: #ffffff; --round-button-active-color: #212121; --translate-main-slider: 100%; --main-slider-color: #e3f2fd; --translate-filters-slider: 0; --filters-container-height: 3.8rem; --filters-wrapper-opacity: 1; } html { font-size: 62.5%; } html, body { height: 100%; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; transition: background-color 0.4s ease-in-out; background-color: var(--background-color); } button { border: none; cursor: pointer; background-color: transparent; outline: none; } nav.amazing-tabs { background-color: var(--white); border-radius: 2.5rem; user-select: none; padding-top: 1rem; } .main-tabs-container { padding: 0 1rem 1rem 1rem; } .main-tabs-wrapper { position: relative; } ul.main-tabs, ul.filter-tabs { list-style-type: none; display: flex; } ul.main-tabs li { display: inline-flex; position: relative; padding: 1.5rem; z-index: 1; } .avatar, .avatar img { height: 4rem; width: 4rem; border-radius: 50%; pointer-events: none; } .avatar img { object-fit: cover; } .round-button { height: 4.8rem; width: 4.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--grey-900); transition: color 0.2s ease-in-out; } .round-button:hover, .round-button.active { color: var(--round-button-active-color); } .round-button svg { pointer-events: none; height: 2.8rem; width: 2.8rem; transform: translate(0, 0); } .main-slider { pointer-events: none; position: absolute; top: 0; left: 0; padding: 1.5rem; z-index: 0; transition: transform 0.4s ease-in-out; transform: translateX(var(--translate-main-slider)); } .main-slider-circle { height: 4.8rem; width: 4.8rem; border-radius: 50%; transition: background-color 0.4s ease-in-out; background-color: var(--main-slider-color); } .animate-jello { animation: jello-horizontal 0.9s both; } @keyframes jello-horizontal { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } .filters-container { overflow: hidden; padding: 0 3rem; transition: max-height 0.4s ease-in-out; max-height: var(--filters-container-height); } .filters-wrapper { position: relative; transition: opacity 0.2s ease-in-out; opacity: var(--filters-wrapper-opacity); } .filter-tabs { border-radius: 1rem; padding: 0.3rem; overflow: hidden; background-color: var(--orange-50); } .filter-tabs li { position: relative; z-index: 1; display: flex; flex: 1 0 33.33%; } .filter-button { display: flex; align-items: center; justify-content: center; border-radius: 0.8rem; flex-grow: 1; height: 3rem; padding: 0 1.5rem; color: var(--orange-700); font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.4rem; } .filter-button.filter-active { transition: color 0.4s ease-in-out; color: var(--grey-900); } .filter-slider { pointer-events: none; position: absolute; padding: 0.3rem; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .filter-slider-rect { height: 3rem; width: 33.33%; border-radius: 0.8rem; background-color: var(--white); box-shadow: 0 0.1rem 1rem -0.4rem rgba(0, 0, 0, 0.12); transition: transform 0.4s ease-in-out; transform: translateX(var(--translate-filters-slider)); }
JS
Copy
const mainTabs = document.querySelector(".main-tabs"); const mainSliderCircle = document.querySelector(".main-slider-circle"); const roundButtons = document.querySelectorAll(".round-button"); const colors = { blue: { 50: { value: "#e3f2fd" }, 100: { value: "#bbdefb" } }, green: { 50: { value: "#e8f5e9" }, 100: { value: "#c8e6c9" } }, purple: { 50: { value: "#f3e5f5" }, 100: { value: "#e1bee7" } }, orange: { 50: { value: "#ffe0b2" }, 100: { value: "#ffe0b2" } }, red: { 50: { value: "#ffebee" }, 100: { value: "#ffcdd2" } } }; const getColor = (color, variant) => { return colors[color][variant].value; }; const handleActiveTab = (tabs, event, className) => { tabs.forEach((tab) => { tab.classList.remove(className); }); if (!event.target.classList.contains(className)) { event.target.classList.add(className); } }; mainTabs.addEventListener("click", (event) => { const root = document.documentElement; const targetColor = event.target.dataset.color; const targetTranslateValue = event.target.dataset.translateValue; if (event.target.classList.contains("round-button")) { mainSliderCircle.classList.remove("animate-jello"); void mainSliderCircle.offsetWidth; mainSliderCircle.classList.add("animate-jello"); root.style.setProperty("--translate-main-slider", targetTranslateValue); root.style.setProperty("--main-slider-color", getColor(targetColor, 50)); root.style.setProperty("--background-color", getColor(targetColor, 100)); handleActiveTab(roundButtons, event, "active"); } });