Home
Omer fils ELENGA
Navigation Mobile iOS

Navigation Mobile iOS

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Navigations Navbar

Author Omer fils ELENGA

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Navigation Mobile iOS 26</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f0f2f5;
            /* Empêche le défilement horizontal et le zoom sur mobile */
            overflow-x: hidden; 
            -webkit-user-select: none; /* Empêche la sélection de texte sur iOS */
            user-select: none;
        }

.content-section {
            padding: 20px;
            padding-bottom: 100px; /* Espace pour la barre de navigation */
            text-align: center;
            display: none; /* Caché par défaut */
        }
        
        .content-section.active {
            display: block; /* Affiché si actif */
        }

.content-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #333;
        }

.content-section p {
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 20px auto;
            line-height: 1.6;
        }

/* --- Styles de la Barre de Navigation iOS --- */
        .ios-tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;

/* L'effet "Vibrancy" d'iOS */
            background-color: var(--ios-bg);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);

border-top: 1px solid rgba(0, 0, 0, 0.1);
            
            /* Respecte la "safe area" (zone sous l'indicateur d'accueil) */
            padding-bottom: env(safe-area-inset-bottom);
        }

.ios-tab-bar ul {
            display: flex;
            justify-content: space-around;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 5px 0;
        }

.ios-tab-bar a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--ios-gray);
            font-size: 10px;
            font-weight: 500;
            padding: 5px;
            min-width: 65px; /* Assure une zone de clic suffisante */
            position: relative;
            transition: color 0.2s ease-in-out;
        }

.ios-tab-bar a.active {
            color: var(--ios-blue);
        }

.ios-tab-bar i {
            font-size: 24px;
            margin-bottom: 4px;
            display: block;
            transition: transform 0.2s ease-in-out;
        }
        
        /* Le curseur qui glisse sous l'onglet actif */
        .tab-slider {
            position: absolute;
            bottom: 0;
            height: 2px;
            background-color: var(--ios-blue);
            border-radius: 2px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

</style>
</head>
<body>

<main>
        <section id="home" class="content-section active">
            <h2>Accueil</h2>
            <p>Bienvenue sur la page d'accueil. Découvrez une expérience de navigation mobile repensée, avec des animations fluides et un design épuré inspiré par les dernières tendances d'iOS.</p>
        </section>
        <section id="search" class="content-section">
            <h2>Rechercher</h2>
            <p>Explorez le monde à votre portée. Utilisez notre fonction de recherche puissante pour trouver exactement ce que vous cherchez, instantanément.</p>
        </section>
        <section id="add" class="content-section">
            <h2>Créer</h2>
            <p>Laissez libre cours à votre créativité. Ajoutez du contenu, créez de nouveaux projets et partagez vos idées avec le monde entier.</p>
        </section>
        <section id="likes" class="content-section">
            <h2>Favoris</h2>
            <p>Retrouvez facilement tout ce que vous avez aimé. Votre collection personnelle de contenus préférés, organisée pour vous.</p>
        </section>
        <section id="profile" class="content-section">
            <h2>Profil</h2>
            <p>Gérez votre compte, personnalisez votre expérience et consultez toutes vos informations en un seul endroit.</p>
        </section>
    </main>

<nav class="ios-tab-bar">
        <ul>
            <li>
                <a href="#home" class="tab-link active" data-tab="home">
                    <i class="fas fa-house"></i>
                    <span>Accueil</span>
                </a>
            </li>
            <li>
                <a href="#search" class="tab-link" data-tab="search">
                    <i class="fas fa-magnifying-glass"></i>
                    <span>Rechercher</span>
                </a>
            </li>
            <li>
                <a href="#add" class="tab-link" data-tab="add">
                    <i class="fas fa-plus-circle"></i>
                    <span>Ajouter</span>
                </a>
            </li>
            <li>
                <a href="#likes" class="tab-link" data-tab="likes">
                    <i class="fas fa-heart"></i>
                    <span>Favoris</span>
                </a>
            </li>
            <li>
                <a href="#profile" class="tab-link" data-tab="profile">
                    <i class="fas fa-user"></i>
                    <span>Profil</span>
                </a>
            </li>
        </ul>
        <div class="tab-slider"></div>
    </nav>

// --- Initialisation des variables ---
            const tabLinks = document.querySelectorAll('.tab-link');
            const contentSections = document.querySelectorAll('.content-section');
            const slider = document.querySelector('.tab-slider');
            
            let activeTab = document.querySelector('.tab-link.active');

// --- Fonctions d'Animation GSAP ---

/**
             * Déplace le curseur (slider) sous l'onglet actif.
             * @param {HTMLElement} targetTab - L'élément de l'onglet cible.
             */
            function moveSlider(targetTab) {
                const linkRect = targetTab.getBoundingClientRect();
                const parentRect = targetTab.closest('.ios-tab-bar').getBoundingClientRect();
                
                // Calcule la position et la largeur du curseur
                const left = linkRect.left - parentRect.left;
                const width = linkRect.width;

// Anime le curseur avec GSAP pour une transition ultra-fluide
                gsap.to(slider, {
                    left: `${left}px`,
                    width: `${width}px`,
                    duration: 0.3,
                    ease: "power2.inOut" // Fonction d'assouplissement pour un mouvement naturel
                });
            }

/**
             * Change le contenu affiché avec une animation de fondu.
             * @param {string} tabId - L'ID de l'onglet à afficher.
             */
            function switchContent(tabId) {
                const newContent = document.getElementById(tabId);
                
                contentSections.forEach(section => {
                    if (section.id === tabId) {
                        // Animation d'apparition pour le nouveau contenu
                        gsap.fromTo(newContent, 
                            { opacity: 0, y: 10 }, 
                            { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }
                        );
                        section.classList.add('active');
                    } else {
                        section.classList.remove('active');
                    }
                });
            }

/**
             * Anime l'icône de l'onglet actif avec un effet de "pop".
             * @param {HTMLElement} icon - L'élément de l'icône à animer.
             */
            function animateActiveIcon(icon) {
                gsap.fromTo(icon, 
                    { scale: 1 }, 
                    { scale: 1.2, duration: 0.15, yoyo: true, repeat: 1, ease: "power2.inOut" }
                );
            }
            
            // --- Gestion des Événements ---

tabLinks.forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault(); // Empêche le comportement de lien par défaut

if (link.classList.contains('active')) {
                        return; // Ne fait rien si l'onglet est déjà actif
                    }

// Effet de "pression" au clic
                    gsap.to(link, { scale: 0.95, duration: 0.1, yoyo: true, repeat: 1 });

// Met à jour les classes 'active'
                    if (activeTab) {
                        activeTab.classList.remove('active');
                    }
                    link.classList.add('active');
                    activeTab = link;

// Déclenche les animations
                    moveSlider(link);
                    switchContent(link.dataset.tab);
                    animateActiveIcon(link.querySelector('i'));
                });
            });

// --- Initialisation au Chargement de la Page ---

// Positionne le curseur sous le premier onglet
            if (activeTab) {
                moveSlider(activeTab);
                // Anime l'icône du premier onglet au chargement
                animateActiveIcon(activeTab.querySelector('i'));
            }

// Anime l'entrée de la barre de navigation et du premier contenu
            gsap.from(".ios-tab-bar", { y: 100, opacity: 0, duration: 0.6, ease: "power3.out" });
            gsap.from(".content-section.active h2", { y: 30, opacity: 0, duration: 0.8, delay: 0.2, ease: "power3.out" });
            gsap.from(".content-section.active p", { y: 30, opacity: 0, duration: 0.8, delay: 0.4, ease: "power3.out" });

});
    </script>
</body>
</html>

Related Examples