Home
Omer fils ELENGA
mobil navigation

mobil navigation

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

Hero Navigations Navbar Range Slider

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, maximum-scale=1.0, user-scalable=no">
    <title>iOS 26 Navigation Concept</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

/* Effet de verre ultra-avancé */
        .ios-glass {
            background: rgba(30, 30, 30, 0.4);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }

/* La lueur active derrière l'icône */
        .nav-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%) translateX(-50%);
            width: 45px;
            height: 45px;
            background: radial-gradient(circle, rgba(59,130,246,0.5) 0%, rgba(59,130,246,0) 70%);
            border-radius: 50%;
            transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Effet élastique */
            z-index: -1;
            filter: blur(5px);
        }

/* --- Gestion des Pages (Fiches) --- */
        .page-card {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding-bottom: 100px; /* Espace pour la nav */
            overflow-y: auto;
            opacity: 0;
            transform: scale(0.95) translateY(20px);
            transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 0;
        }

.page-card.active {
            opacity: 1;
            transform: scale(1) translateY(0);
            pointer-events: auto;
            z-index: 10;
        }

/* Animation de sortie pour l'ancienne page */
        .page-card.exit {
            transform: scale(0.98);
            opacity: 0;
            filter: blur(10px);
        }

/* Custom Scrollbar invisible */
        .page-card::-webkit-scrollbar {
            display: none;
        }

/* Micro-animations des icônes */
        .nav-item ion-icon {
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s;
        }
        .nav-item.active ion-icon {
            transform: translateY(-4px) scale(1.1);
            color: #60a5fa; /* Bleu iOS */
            filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
        }

</style>
</head>
<body class="text-white h-screen w-screen relative">

<section id="home" class="page-card active bg-gradient-to-b from-gray-900 to-black">
        <div class="w-full max-w-md p-6 space-y-6">
            <h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
                Bonjour.
            </h1>
            <p class="text-gray-400 text-lg">Bienvenue sur l'interface iOS 26.</p>
            
            <div class="w-full h-40 rounded-3xl bg-white/5 border border-white/10 p-4">
                <div class="h-full w-full bg-gradient-to-tr from-purple-500/20 to-blue-500/20 rounded-2xl flex items-center justify-center">
                    <span class="text-sm font-medium tracking-widest uppercase text-white/50">Widget Météo</span>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="h-32 rounded-3xl bg-white/5 border border-white/10"></div>
                <div class="h-32 rounded-3xl bg-white/5 border border-white/10"></div>
            </div>
        </div>
    </section>

<section id="search" class="page-card bg-gradient-to-b from-slate-900 to-black">
        <div class="w-full max-w-md p-6 flex flex-col items-center">
            <div class="w-full h-14 rounded-full bg-white/10 border border-white/10 flex items-center px-6 mb-8 backdrop-blur-md">
                <ion-icon name="search-outline" class="text-xl text-gray-400 mr-3"></ion-icon>
                <input type="text" placeholder="Rechercher..." class="bg-transparent outline-none text-white w-full placeholder-gray-500">
            </div>
            <div class="text-6xl text-gray-700 font-thin mb-4">
                <ion-icon name="planet-outline"></ion-icon>
            </div>
            <h2 class="text-2xl font-semibold">Explorer</h2>
        </div>
    </section>

<section id="likes" class="page-card bg-gradient-to-b from-zinc-900 to-black">
        <div class="w-full max-w-md p-6">
            <h2 class="text-3xl font-bold mb-6">Activité</h2>
            <div class="space-y-4">
                <div class="flex items-center p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm">
                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-4">
                        <ion-icon name="mail" class="text-white"></ion-icon>
                    </div>
                    <div>
                        <h4 class="font-semibold">Nouveau Message</h4>
                        <p class="text-xs text-gray-400">Il y a 2 minutes</p>
                    </div>
                </div>
                <div class="flex items-center p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm">
                    <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mr-4">
                        <ion-icon name="call" class="text-white"></ion-icon>
                    </div>
                    <div>
                        <h4 class="font-semibold">Appel Manqué</h4>
                        <p class="text-xs text-gray-400">Il y a 10 minutes</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="profile" class="page-card bg-gradient-to-b from-neutral-900 to-black">
        <div class="w-full max-w-md p-6 flex flex-col items-center">
            <div class="w-24 h-24 rounded-full bg-gradient-to-tr from-pink-500 to-orange-400 p-1 mb-4">
                <div class="w-full h-full rounded-full bg-gray-800 border-4 border-black"></div>
            </div>
            <h2 class="text-2xl font-bold">Utilisateur</h2>
            <p class="text-blue-400 text-sm mb-8">@ios26_concept</p>
            
            <button class="w-full py-4 rounded-2xl bg-white/10 border border-white/10 font-medium active:scale-95 transition-transform">
                Paramètres
            </button>
        </div>
    </section>

</div>

// Fonction pour positionner l'indicateur lumineux
        function moveIndicator(element) {
            // Calculer la position relative de l'élément cliqué par rapport à la barre
            const navRect = element.parentElement.getBoundingClientRect();
            const itemRect = element.getBoundingClientRect();
            
            // Le centre de l'icône cliquée relatif à la barre
            const leftPosition = itemRect.left - navRect.left + (itemRect.width / 2);
            
            indicator.style.left = `${leftPosition}px`;
        }

// Initialiser la position de l'indicateur sur le premier élément
        window.addEventListener('load', () => {
            const activeItem = document.querySelector('.nav-item.active');
            if(activeItem) moveIndicator(activeItem);
        });

// Gestion des clics
        navItems.forEach(item => {
            item.addEventListener('click', (e) => {
                const targetId = item.getAttribute('data-target');
                const targetPage = document.getElementById(targetId);
                const activePage = document.querySelector('.page-card.active');

// Si on clique sur l'onglet déjà actif, ne rien faire
                if (item.classList.contains('active')) return;

// 1. Gérer la Navigation (Look)
                navItems.forEach(nav => nav.classList.remove('active'));
                item.classList.add('active');
                
                // Changer les icônes (Outline -> Filled pour l'effet Apple)
                navItems.forEach(nav => {
                    const icon = nav.querySelector('ion-icon');
                    const name = icon.getAttribute('name');
                    // Reset to outline
                    if(!name.includes('-outline')) icon.setAttribute('name', name + '-outline');
                });
                
                // Set active icon to filled (supprime '-outline')
                const activeIcon = item.querySelector('ion-icon');
                const activeName = activeIcon.getAttribute('name');
                activeIcon.setAttribute('name', activeName.replace('-outline', ''));

// Déplacer la lueur
                moveIndicator(item);

// 2. Gérer les Pages (Transitions)
                if (activePage) {
                    activePage.classList.remove('active');
                    activePage.classList.add('exit');
                    
                    // Nettoyer la classe exit après l'anim
                    setTimeout(() => {
                        activePage.classList.remove('exit');
                    }, 400);
                }

if (targetPage) {
                    targetPage.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>

Related Examples

Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

20.6k
Navbar compoent

Author:
Amit Pachange

2 years ago

16.2k
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

4.9k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

14k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.4k
Navbar
E-commerce Navbar

Author:
Aman kumar

1 year ago

4.6k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.8k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

2k
Tailwind css navigation header
Tailwind css navigation header

Author:
Abid Ullah

1 year ago

2.5k
Animated underline hover navbar
Simple animated underline hover effect navbar.

Author:
inbarajan P

1 year ago

2.6k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Author:
Coastal UI

1 year ago

3.1k
animated navigation bar

Author:
Md. Tofayel islam

11 months ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components