Barra de navegación de iconos inferior con Tailwind CSS

787 fndkytrk

Abrir en el editor Publica tu código

Barra de navegación de iconos inferior con Tailwind CSS

Recomendado

12 December 2025

Ejemplo de página web de fitness: diseño HTML y CSS

7 November 2024

Formulario de inicio de sesión

16 January 2026

Código HTML del reproductor de juegos Flash Ruffle

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sadece İkon Çubuğu</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="min-h-screen">

<nav class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-300 h-[60px] flex justify-around items-center z-50">
        
        
        <button class="nav-button active" data-page="Ana Sayfa">
            <i class="fa-solid fa-house icon"></i>
        </button>
        
        
        <button class="nav-button" data-page="Arama">
            <i class="fa-solid fa-magnifying-glass icon"></i>
        </button>

<button class="nav-button" data-page="Artı">
            <i class="fa-solid fa-plus-square icon"></i>
        </button>
        
        
        <button class="nav-button" data-page="Profil">
            <i class="fa-solid fa-user icon"></i>
        </button>
    </nav>

/**
         * Aktif butonu belirler ve diğerlerini sıfırlar.
         * @param {string} pageName Yeni aktif sayfanın adı.
         */
        function setActiveButton(pageName) {
            // Tüm butonlardaki aktif (active) sınıfını kaldır
            navButtons.forEach(btn => btn.classList.remove('active'));

// Tıklanan butonu bul ve aktif sınıfını ekle
            const activeButton = document.querySelector(`.nav-button[data-page="${pageName}"]`);
            if (activeButton) {
                activeButton.classList.add('active');
            }
        }

// Tüm butonlara tıklama dinleyicileri ekle
        navButtons.forEach(button => {
            button.addEventListener('click', () => {
                const page = button.getAttribute('data-page');
                setActiveButton(page);
            });
        });

// Sayfa yüklendiğinde varsayılan olarak "Ana Sayfa"yı aktif yap
        window.onload = () => {
            setActiveButton('Ana Sayfa');
        };
    </script>
</body>
</html>

CSS

body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            min-height: 100vh;
            display: flex; 
            flex-direction: column;
            margin: 0;
        }
        /* İkon çubuğuna özgü stiller */
        .nav-button {
            transition: color 0.2s;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 0;
            color: #4b5563; /* Varsayılan gri renk */
            flex-grow: 1; /* Butonların eşit genişlikte olması için */
        }
        .nav-button.active {
            color: #1f2937; /* Aktif olduğunda koyu renk (Vurgu) */
        }
        .nav-button:hover {
            color: #ef4444; /* Hover'da kırmızı renk */
        }
        .icon {
            font-size: 1.5rem;
        }
        /* Navigasyon çubuğu sabitlendiği için yukarıdaki tüm boşluğu kaplar */
        .fill-space {
            flex-grow: 1;
            padding-bottom: 60px; /* Çubuğun yerini içerikte boş bırakır */
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }