740508 Creez Votre Menu Interactif en Images en HTML Css

Click here to load reader

  • date post

    20-Jan-2016
  • Category

    Documents

  • view

    33
  • download

    3

Embed Size (px)

Transcript of 740508 Creez Votre Menu Interactif en Images en HTML Css

  • Crez votre menuinteractif en images

    en HTML/CSS !Par Dwayn ,

    Cyrille Griboval (gcyrillus) et minato13

    www.siteduzero.com

    Licence Creative Commons 6 2.0

  • Dernire mise jour le 24/11/2012

  • Sommaire 2Sommaire ........................................................................................................................................... 1Lire aussi ............................................................................................................................................ 3 Crez votre menu interactif en images en HTML/CSS ! .................................................................... 3La structure HTML ............................................................................................................................................................. 4Notre corps HTML5 ..................................................................................................................................................................................................... 5CSS 1/2 : Mise en forme du menu avec les images ......................................................................................................... 5La mise en forme ........................................................................................................................................................................................................

    11CSS 2/2 : Mise en place du texte et des finitions ............................................................................................................ 11Mise en place du texte dans les liens-images ........................................................................................................................................................... 14Transitions CSS3 ...................................................................................................................................................................................................... 15Le poids d'un slecteur ............................................................................................................................................................................................. 17Amlioration du temps au survol ...............................................................................................................................................................................

    18Complments et variations .............................................................................................................................................. 18Mme menu, mais de plus petite paisseur .............................................................................................................................................................. 20Menu vertical : ........................................................................................................................................................................................................... 21Effets de zoom au survol et focus ............................................................................................................................................................................. 25Le dernier dfi ! .........................................................................................................................................................................................................

    27Q.C.M. ............................................................................................................................................................................. 29Partager .....................................................................................................................................................................................................................

    2/30

    www.siteduzero.com

  • Crez votre menu interactif en images en HTML/CSS !

    Par Cyrille Griboval (gcyrillus) et Dwayn et minato13

    Mise jour : 24/11/2012Difficult : Intermdiaire Dure d'tude : 3 heures

    Bienvenue dans ce tuto qui vous permettra de crer 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 crer un menu, avec de beaux effets,interactif, uniquement en HTML5 / CSS3, sans mme avoir besoin de Javascript !

    Voici un aperu 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 sr, l'HTML5 et le CSS3, d'ailleurs, le tuto de [email protected] est parfait pourles apprendre.

    Alors, envie ? Eh bien, allons-y !! Sommaire du tutoriel :

    La structure HTMLCSS 1/2 : Mise en forme du menu avec les imagesCSS 2/2 : Mise en place du texte et des finitionsComplments et variationsQ.C.M.

    Sommaire 3/30

    www.siteduzero.com

  • La structure HTMLPour le tuto, nous utiliserons des images depuis lorempixel.com, celles-ci sont soumises aux droits d'auteurs. Elles peuventservir tester vos mises en pages, mais ne peuvent tre rutilises sur votre site, vous devrez les remplacer par les vtres.

    Nous allons donc construire notre menu en les intgrant nos liens.

    Que va contenir notre page HTML ?

    Nous aurons des liens qui contiendront des images, ils auront un titre. Et pour finir, nous dfinirons l'ordre d'accs aux imagesavec la touche Tabulation.Le reste se fera avec le CSS .

    Notre corps HTML5

    Code : HTML - Structure du menu

    Mon joli menu en HTML/CSS !

    Si vous avez bien lu le tuto de [email protected], cette page ne vous semblera pas difficile.

    Crez votre menu interactif en images en HTML/CSS ! 4/30

    www.siteduzero.com

  • 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 slecteurs CSS dont nous aurons besoin pour cibler les lments de notre menu :

    Types : Lesquels : Cible :Les identifiantsuniques (aussiappels id) :

    #galerie-menuLa balise qui possdera l'attributid="galerie-menu". En gros, la balise.

    Nom(s) de balise(s) : La balise a (pour les liens) Lien

    Les pseudos-lments :

    :hover,:focus ( Permettra de modifier tout lment HTMLslectionn par la touche Tabulation ou par la souris),:first-child ( Premier lment du menu ),:before ( Permet de gnrer du contenu avant lecontenu d'un lment ! )

    Une interaction ponctuelle (survol), permanente (focus), une position (first-child) ,complment de contenu (:before aveccontent:'').

    Avec ces slecteurs, nous pouvons dj construire le squelette de notre feuille de style qui ne ciblera que cette bote et seslments :

    Code : CSS - style.css

    #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' crer nos rgles de style. En avant ! Notre premier objectif :

    Nous allons faire un menu ouvert sur un "lien par dfaut" tandis que les autres seront rtracts. L'ide est d'avoir un menu quilargit un lien lorsqu'il est survol et qui referme les autres afin que le menu conserve toujours la mme largeur :

    Crez votre menu interactif en images en HTML/CSS ! 5/30

    www.siteduzero.com

  • Il va falloir superposer les images de droite gauche.

    C'est beau, hein ?

    Le conteneur gnralOn veut une bote rectangulaire montrant une image dplie et les autres replies. La hauteur et la largeur seront adaptes enfonction 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 bote de :1. 300 pixels de hauteur.2. 670 pixels de largeur (1x 400) + (9x 30).

    Une bordure, un lger effet d'arrondi et un ombrage suffiront mettre en valeur notre bote.

    Le premier style #galerie-menu ressemblera donc ceci :Code : CSS - style.css => #galerie-menu

    #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 slectionns, ni survols, aient 30 px de largeur pourlaisser voir une partie de l'image.Dans une autre tape, ces 30 pixels nous permettront d'afficher le titre des liens.Par dfaut, ce sont des lments de type inline et ils doivent se rtracter sur 30px de largeur.Il faut modifier leur formatage pour appliquer height et width et nous avons 2 pistes pour qu'il reste cte cte : float oudisplay.

    float:right, est une option sduisante, mais qui a plusieurs dfauts :

    Crez votre menu interactif en images en HTML/CSS ! 6/30

    www.siteduzero.com

  • Inverser visuellement le sens de lecture des liens et leur ordre de tabulation.On va devoir grer les dfauts des flottants qui sortent du flux.

    display:inline-block, conservera le caractre inline des liens tout en nous donnant la possibilit de nousservir des pseudo-lments et de leur donner une taille.Le seul inconvnient est qu'il y aura un espace rsiduel entre chacun d'eux.

    Nous allons opter pour display:inline-block et nous corrigerons plus tard ce petit dfaut visuel.

    Donc voici notre #galerie-menu a :Code : CSS

    #galerie-menu a {display:inline-block; width:30px; height:300px;}

    Mise en place du comportement au