Barra de navegación de iconos inferior con Tailwind CSS

68 fndkytrk

Abrir en el editor Publica tu código

Barra de navegación de iconos inferior con Tailwind CSS

Recomendado

13 June 2025

Interfaz de usuario de la aplicación de despertador y cronómetro

2 November 2025

Botón animado CSS con efecto de onda

29 January 2025

Un código de sheeshokaokayokay

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

Recomendado

Interfaz de usuario de la aplicación de despertador y cronómetro

Botón animado CSS con efecto de onda

Un código de sheeshokaokayokay

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS