Barra de navegación de iconos inferior con Tailwind CSS

640 fndkytrk

Abrir en el editor Publica tu código

Barra de navegación de iconos inferior con Tailwind CSS

Recomendado

27 January 2025

Página de destino de una agencia de marketing digital

18 November 2024

Tarjeta CSS brillante

20 February 2026

Cargador de cubos de imágenes 3D

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;
        }