Le blog

Une application web monopage (en anglais single-page application ou SPA) est une application web accessible via une page web unique. Le but est d'éviter le chargement d'une nouvelle page à chaque action demandée, et de fluidifier ainsi l'expérience utilisateur. Deux méthodes existent pour ce faire : soit on charge l'ensemble des éléments de l'application (contenu, images, CSS et JavaScript) dans un unique fichier HTML, soit on récupère et affiche dynamiquement les ressources nécessaires en fonction des actions de l'utilisateur. Le terme a été introduit par Steve Yen en 2005. (Wikipédia)

Nous n'avons qu'une seule page html contenant plusieurs onglets.

Historique.

C'est pratique :

•  On peut faire l'impression de l'ensemble directement puisque tout est sur la même page.
•  Les contenus sont affichés en une seule fois (temps de téléchargement long à cause de son contenu mais rapide après car il ne génère plus aucun ralentissement.
• Permet de réaliser des designs originaux (surprennent les utilisateurs et les séduisent)...

Exemple: 60 exemples des sites one page

Prenons un fichier html contenant le menu :

<nav>
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#a1">Menu 1</a></li>
      <li><a href="#a2">Menu 2</a></li>
      <li><a href="#a3">Menu 3</a></li>
      <li><a href="#a4">Menu 4</a></li>
      <li><a href="#a5">Menu 5</a></li>
    </ul>
</nav>

et les sections comme :

<section id="a1">
    <h1>Page 1 - Menu 1</h1>
    <p>Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.</p>
</section>

Nous allons ensuite travailler notre menu et puis nos différents éléments de page qui sont tous dans une balise section :

section
	{
		position :absolute; 
	}

Tous les éléments sont positionnés l'un au-dessus de l'autre.

Mettre toute la section en display : none;

Comme nous avons mis beaucoup d'éléments en positionnement absolu, son contenu n'est plus calculé. Pour ça, il va falloir qu'on ajoute à body, html une hauteur.

body, html
	{
		height:100%;
	}

Et nous rétablissons la hauteur de l'élément.

Pour faire apparaître chaque section au clique sur le menu, nous allons utiliser le pseudo sélecteur « target » qui affiche chaque section ciblée par l'ancre.

section:target
	{
		display:block;
	}

Nous avons réalisé notre site monopage.

Pour voir la démo : https://codepen.io/Bunor/pen/XNGPWv