Maxy.fr

Faire une page avec plusieurs vues dynamiques sans Javascript

Il existe de plus en plus de petits sites avec une page unique disposant de plusieurs vues avec la possibilité de naviguer entre elles à l'aide de liens mais sans pour autant recharger la page. Le changement des vues est dynamique et on a souvent tendance à directement associer dynamisme avec l'utilisation de javascript.

Sachez que mettre en place ce système ne requiert pas forcement l'utilisation de javascript.

Voilà un code simple permettant de gérer l'affichage plusieurs vues directement depuis le CSS en utilisant les "target" :

Partie CSS :

#page > *{
	display:none;
}
#page > *:target{
	display:block;
}
#page > *:last-child{
	display:block;
}
#page > *:target ~ * {
    display: none;
}

 

Partie HTML :

<nav>
	<a href="#page1">Go 1</a>
	<a href="#page2">Go 2</a>
</nav>

<section id="page">
	<div id="page1">Page 1</div>
	<div id="page2">Page 2</div>
</section>

Chacune des vues sont contenues dans un div ayant l'ID que vous souhaitez (ici #page1, #page2 ...). Cet ID doit être le même que celui utilisé pour le target des liens de navigation.

La partie CSS se charge dans un premier temps de cacher toutes les vues de la page ("#page > *" : Tous les élements contenus dans la section #page). Ensuite, l'élément ciblé par l'URL (s'il existe) est affiché ("#page > *:target"). La suite du CSS permet d'afficher une page par défaut si aucune vue n'est sélectionnée.

Dans la configuration actuelle, la vue qui sera affichée par défaut sera la dernière ("#page > *:last-child"). Ici ce sera donc la #page2.

Voir une démo du code

Source et plus d'infos

Catégories : CSS, HTML

Par Guillaume le 18/08/2016 à 01:12

Partager l'article :

Articles similaires

Design responsive : Des images multi résolution avec srcset

À l'heure où les sites internet sont visités sur une multitude de supports que ce soit smartphone, tablette ou ordinateur, il est presque impératif de s'adapter lors du développement d'un site notamment en utilisant des images de résolutions...

Définir plus facilement les largeurs avec box-sizing

Beaucoup d’entre vous le savent, il est parfois assez difficile à définir correctement la largeur d’un élément en CSS. Il suffit d’ajouter une marge intérieur (padding) pour que la largeur choisi à l’aide de la...

Colorer les lignes paires d’un tableau en CSS

Il est souvent très utile de colorer de façon alternée les lignes d’un tableau, ne serait-ce que pour s’y retrouvé ou simplement parce que c’est plus jolie. Sachez qu’il est très simple de le faire en CSS à l’aide des...