Créez votre menu interactif en images en HTML/CSS !

OpenClassrooms

Formation

En Ligne

Prix sur demande

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Les meilleurs cours en HTML

Afficher tout

Afficher tout

Description

  • Typologie

    Formation

  • Méthodologie

    En ligne

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

Bienvenue dans ce tuto qui vous permettra de créer un menu interactif uniquement codé en HTML/CSS !

Dans ce mini-tuto, je vais - enfin nous allons - comme je l'ai dit au-dessus, vous apprendre à créer un menu, avec de beaux effets, interactif, uniquement en HTML5 / CSS3, sans même avoir besoin de Javascript !

Voici un aperçu de ce que vous saurez faire à la fin de ce tuto :

Nous pourrons naviguer dans les images soit avec Tabulation soit avec la souris ;) .
Le menu en live

Si vous êtes sage ( :-° ), vous aurez droit à quelques variantes de ce menu...

Les seules connaissances requises sont, bien sûr, l'HTML5 et le CSS3, d'ailleurs, le tuto de M@teo21 est parfait pour les apprendre. :)

Alors, envie ? Eh bien, allons-y !!

La structure HTML

Pour le tuto, nous utiliserons des images depuis lorempixel.com, celles-ci sont soumises aux droits d'auteurs. Elles peuvent servir à tester vos mises en pages, mais ne peuvent être réutilisées sur votre site, vous devrez les remplacer par les vôtres.

Nous allons donc construire notre menu en les intégrant à nos liens.

Que va contenir notre page HTML ?

Nous aurons des liens qui contiendront des images, ils auront un titre. Et pour finir, nous définirons l'ordre d'accès aux images avec la touche Tabulation.
Le reste se fera avec le CSS ;) .

Notre corps HTML5<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" /> <!-- Fichier CSS --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>Mon joli menu en HTML/CSS !</title> </head> <body> <div id="galerie-menu"> <!-- Notre navigation --> <nav> <a href="#" tabindex="0" title="Allez, vas y!" ><img src="http://lorempixel.com/400/300/sports/1/" alt="sport 1" /></a> <a href="#" tabindex="0" title="J'y vais" ><img src="http://lorempixel.com/400/300/sports/2/" alt="sport 2" /></a> <a href="#" tabindex="0" title="Tenir la distance"><img src="http://lorempixel.com/400/300/sports/3/" alt="sport 3" /></a> <a href="#" tabindex="0" title="Surf" ><img src="http://lorempixel.com/400/300/sports/4/" alt="sport 4" /></a> <a href="#" tabindex="0" title="Sur du velours "><img src="http://lorempixel.com/400/300/sports/5/" alt="sport 5" /></a> <a href="#" tabindex="0" title="Coucher de soleil"><img src="http://lorempixel.com/400/300/sports/6/" alt="sport 6" /></a> <a href="#" tabindex="0" title="Plongez!" ><img src="http://lorempixel.com/400/300/sports/7/" alt="sport 7" /></a> <a href="#" tabindex="0" title="Je vole !" ><img src="http://lorempixel.com/400/300/sports/8/" alt="sport 8" /></a> <a href="#" tabindex="0" title="1er jusqu'au bout"><img src="http://lorempixel.com/400/300/sports/9/" alt="sport 9" /></a> <a href="#" tabindex="0" title="Prêt, contact !" ><img src="http://lorempixel.com/400/300/sports/10/" alt="sport 10" /></a> </nav> </div> </body> </html>

Si vous avez bien lu le tuto de M@teo21, cette page ne vous semblera pas difficile.
Trop facile pour nous, grands WebDeveloppers ;) !! Bon, passons à la suite.

CSS 1/2 : Mise en forme du menu avec les imagesLa mise en forme

Voici la liste des sélecteurs CSS dont nous aurons besoin pour cibler les éléments de notre menu :

Types :

Lesquels :

Cible :

Les identifiants uniques (aussi appelés id) :

#galerie-menu

La balise qui possèdera l'attribut id="galerie-menu". En gros, la balise <div>.

Nom(s) de balise(s) :

La balise a (pour les liens)

<a href="#">Lien</a>

Les pseudos-éléments :

:hover,
:focus ( Permettra de modifier tout élément HTML sélectionné par la touche Tabulation ou par la souris),
:first-child ( Premier élément du menu ),
:before ( Permet de générer du contenu avant le contenu d'un élément ! )

Une interaction ponctuelle (survol),
permanente (focus),
une position (first-child) ,
complément de contenu (:before avec content:'').

Avec ces sélecteurs, nous pouvons déjà construire le squelette de notre feuille de style qui ne ciblera que cette boîte et ses éléments :

#galerie-menu { } #galerie-menu a, #galerie-menu:hover a:focus { } #galerie-menu a:first-child { } #galerie-menu a:hover, #galerie-menu a:focus { } #galerie-menu a:before { }

Eh bien, il ne reste plus qu'à créer nos règles de style. En avant ! :)

Notre premier objectif :

Nous allons faire un menu ouvert sur un "lien par défaut" tandis que les autres seront rétractés. L'idée est d'avoir un menu qui élargit un lien lorsqu'il est survolé et qui referme les autres afin que le menu conserve toujours la même largeur :

Il va falloir superposer les images de droite à gauche.

C'est beau, hein ?

Le conteneur général

On veut une boîte rectangulaire montrant une image dépliée et les autres repliées. La hauteur et la largeur seront adaptées en fonction de la taille des images et du nombre de liens que l'on veut afficher.

Ici nous avons 10 images de 400 pixels de largeur sur 300 pixels de hauteur (400*300 px) :
Une ouverte et neuf autres visibles sur 30 pixels, largeur suffisante pour y afficher un texte vertical bien lisible.

Ce qui nous fait une boîte de :

  1. 300 pixels de hauteur.

  2. 670 pixels de largeur (1x 400) + (9x 30).

Une bordure, un léger effet d'arrondi et un ombrage suffiront à mettre en valeur notre boîte. ^^

Le premier style #galerie-menu ressemblera donc à ceci :

#galerie-menu { height:300px; width:670px; margin:1em auto; border:solid; border-radius:3px; box-shadow:1px 1px 3px gray; } Mise en forme des liens

Nous allons tout d'abord faire en sorte que les liens, quand ils ne sont ni sélectionnés, ni survolés, aient 30 px de largeur pour laisser voir une partie de l'image.
Dans une autre étape, ces 30 pixels nous permettront d'afficher le titre des liens.
Par défaut, ce sont des éléments de type inline et ils doivent se rétracter sur 30px de largeur.
Il faut modifier leur formatage pour appliquer height et width et nous avons 2 pistes pour qu'il reste côte à côte : float ou display.

  • float:right, est une option séduisante, mais qui a plusieurs défauts :

    • Inverser visuellement le sens de lecture des liens et leur ordre de tabulation.

    • On va devoir gérer les défauts des flottants qui sortent du flux.

  • display:inline-block, conservera le caractère inline des liens tout en nous donnant la possibilité de nous servir des pseudo-éléments et de leur donner une taille.
    Le seul inconvénient est qu'il y aura un espace résiduel entre chacun d'eux.

Nous allons opter pour display:inline-block et nous corrigerons plus tard ce petit défaut visuel. ;)

Donc voici notre #galerie-menu a :

#galerie-menu a { display:inline-block; width:30px; height:300px; } Mise en place du comportement au survol à la souris ou avec Tab des images du menu pour leur défilement

Il faut que l'image soit affichée entièrement lorsque nous passerons la souris ou lorsque que la touche Tab donne le focus. Il suffira juste de modifier la largeur de 400 px :

#galerie-menu a:hover, #galerie-menu a:focus { width:400px; /* Aussi simple que ça !*/ }

Mais maintenant il faut définir un lien :

  • Toujours entièrement visible par défaut ;

  • Qui ne gêne pas les autres ;

  • Pour conserver un aspect visuel cohérent au menu au repos.

Nous choisirons le premier lien avec le pseudo-élément :first-child.

Cette chose sera possible grâce à position: absolute :

#galerie-menu a:first-child { width: 400px; position: absolute; } Petite problématique...

Comment peut-il rester ouvert quand, précédemment, on met tous les liens en 30 pixels de largeur ?

Il y a 2 raisons :

  1. De façon générale, la dernière déclaration écrase les précédentes.

  2. Il y a la notion de "poids des sélecteurs" qui est importante à connaître.

Et puis, c'est le CSS qui fait ça ( Cascading Style Sheets ou effets en cascade si vous voyez ce que je veux dire ;) ).

Le poids du sélecteur : #galerie-menu a est plus faible que #galerie-menu a:first-child, et si nous le plaçons plus tôt dans le code, il sera appliqué.
Lisez cet article pour davantage d'informations. Je vous conseille vivement de le lire, car il vous permettra de mieux comprendre comment fonctionnent les styles du menu.

Notre menu devrait donc, pour le moment, ressembler à ça :

Voici un lien pour tester, ce sera mieux qu'une image; ;)

Ce n'est pas ça du tout ! Les images ne sont pas toutes visibles et il y a un grand espace blanc vide à droite dans le menu :( !!

... qui trouve sa solution.

Nous allons régler ces quelques défauts, sinon nous n'aurions pas fait ce tuto !
Donc vous allez reprendre votre feuille de style, et y ajouter les quelques propriétés CSS utiles qui finaliseront cette première étape.
Si vous voulez, vous pouvez essayer de chercher. ;)

Voilà le tableau :

Propriétés CSS:

A mettre sur le(s) sélecteur(s) :

Pourquoi :

text-align:right;
white-space:nowrap;
overflow:hidden;

#galerie-menu

Pour remplir cette espace blanc à droite.
Pour garder toutes les images sur une seule ligne.
Pour cacher ce qui déborderait.

position:relative;

#galerie-menu et
#galerie-menu a

Cloisonne la boîte qui va servir de référence de positionnement et activer le z-index.

left:0 et top:0

#galerie-menu a:first-child

Pour que le premier lien reste à gauche.

overflow:hidden;
vertical-align:top;

#galerie-menu a

Pour que les liens repliés cachent nos belles images qui débordent.
Pour que tous nos liens s'alignent bien horizontalement.

z-index:1;

#galerie-menu a

Pour mettre les liens en avant-plan.

Catégories liées

  • Cours lien html
  • Cours programmation web langage html
  • Cours HTML
  • Cours HTML a distance
  • Formation a distance
  • Formations OpenClassrooms

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Créez votre menu interactif en images en HTML/CSS !

Prix sur demande

Les meilleurs cours en HTML

Afficher tout

Afficher tout