Site Web Complet avec :
Une Barre de Navigation + Haut de Page + Plein Ecran,
pour cela, obligation de faire une seule page (index),
qui affiche le contenu d'autres pages HTML sans CSS ni JavaScript
Un seul fichier CSS et JavaScript Possibles
Idéal pour faire des présentation, I-Book, Album Photos, ...
Présentation du Site Web
Ce site fonctionne comme une application légère à page unique. La page principale (index.html) reste toujours affichée tandis que le contenu des autres pages est chargé dynamiquement sans rechargement complet. Cela garantit une navigation fluide et rapide.
Fonctionnement Général
- Le menu charge les pages internes via JavaScript (fetch), sans quitter la page.
- La barre de navigation se cache en défilement descendant et réapparaît en remontant.
- Les icônes changent d’image au survol pour une meilleure lisibilité.
- Un bouton permet d’activer ou quitter le mode plein écran.
- L’icône “haut de page” remonte instantanément en haut du site.
Design et Mise en Page
- Image de fond fixe pour un effet moderne et profond.
- Menus et blocs visuels avec ombres, coins arrondis et transparence.
- Design responsive grâce à clamp() et flexbox.
- Contenus présentés dans des blocs lisibles sur fond semi-transparent ou blanc.
Points Forts
- Navigation très fluide (aucun rechargement complet).
- Barre de navigation intelligente et ergonomique.
- Mode plein écran intégré.
- Code clair, propre et facile à modifier.
- Design élégant et adaptable.
Limitations
- Le bouton “retour” du navigateur ne change pas de page interne.
- Les pages chargées doivent être en HTML brut (sans head/body).
- Le chargement dynamique peut être bloqué par certaines règles CORS en local.
- Structure simple non prévue pour de très grandes applications.
Améliorations Possibles
- Ajouter un historique de navigation (pushState).
- Ajouter des animations de transition entre les pages.
- Mettre un indicateur de chargement pendant les fetch.
- Préchargement automatique des pages en cache.
- Ajouter un mode clair / sombre.