Créer un menu adaptable à toutes les résolutions

Transcription

1 Créé par : feektif Ce guide est reproductible en : 30 à 40 min et est d'un niveau : Intermédiaire Pour de tutoriel, nous allons réaliser un menu composé de cinq liens, chacun divisé en 3 éléments. Un curseur indiquera la section dans laquelle se trouve le visiteur, l'intitulé du lien et un sous titre donnant plus de détails sur le contenu de la page. 1 / 13

2 Etape : 1/23 Etape : 2/23 Le menu s'adapte automatiquement à la résolution de l'écran utilisé et les éléments superflus comme le curseur et les soustitres sont masqués pour les petits écrans. Celui-ci se transforme en menu rétractable pour les utilisateurs de smartphones. 2 / 13

3 Etape : 3/23 Nous utiliserons ici une structure basée sur HTML5. Le menu sera donc placé dans un élément, lui meme contenu dans un élément, et sera plutot simple dans sa structure : une liste non ordonnée dans laquelle chaque élément contiendra également une liste non ordonnée de trois items curseur, intitulé du lien et sous-titre du lien. Coté code, nous obtiendrons donc ceci. Etape : 4/23 Nous allons maintenant nous occuper de la création de nos liens. Chaque balise contenue dans une balise sera enveloppée dans un lien. Comme expliqué précédemment, chaque lien est constitué de trois éléments correspondants aux trois balises qui les composent. Ce qui nous donnera, dans l'ordre, l'intégration du curseur actif pour la page en cours, l'intitulé du lien et enfin son sous-titre 3 / 13

4 Etape : 5/23 Avant d'aller plus loin, nous allons modifier des éléments, par exemple supprimer les puces affichées sur les listes, modifier la couleurs de liens, etc. Nous en profiterons également pour définir un style à notre balise en lui donnant un motif de fond, une typographie et une taille de police adaptée. Dans la feuille de style menu-responsive.css, nous allons donc écrire le code ci dessus. Etape : 6/23 Mise en place du menu 4 / 13

5 Etape : 7/23 Nous partirons du principe que le site dans lequel sera intégré le menu fera 960 pixels de largeur maximale. Celui-ci sera placé en haut de la fenetre du navigateur et devra toujours etre au centre de l'écran. Nous allons donc envelopper notre élément dans un ayant pour id="center". Coté HTML Etape : 8/23 Et coté CSS 5 / 13

6 Etape : 9/23 Intégrons tous les liens horizontalement, puis nous centrerons le texte dans chacun d'eux. Créons ensuite des classes pour définir un style à chaque élément.les intitulés de liens auront un visuel renforcé ainsi qu'une ombre interne blanche pour apporter un peu de relief. Les sous-titres auront une taille plus faible et seront affichés en italique.définissons leurs styles dans menu-responsive.css Etape : 10/23 Intégrons maintenant nos balises HTML et attribuons leur leurs règles de styles spécifiques : 6 / 13

7 Etape : 11/23 Nous allons créer un fond en dégradé, que nous réaliserons avec CSS3. La syntaxe des dégradés CSS3 et assurer une compatibilité avec les différents navigateurs étant toujours un peu laborieux, je vous propose d'utiliser un très bon outil en ligne qui se chargera de nous fournir le code CSS3 du dégradé voulu et un simple copiercoller suffira à son intégration dans notre feuille de styles. Etape : 12/23 Le HTML étant maintenant en place, occupons nous de la partie CSS du background. Celui-ci cevra couvrir toute la largeur du site, avoir une fine bordure, une ombre portée et évidemment afficher un dégradé. Nous appliquerons une marge supérieure négative au menu afin de placer celui-ci au dessus du dégradé : 7 / 13

8 Etape : 13/23 Avec Web Developer, nous constatons qu'un premier problème survient lorsque l'affichage du navigateur est = ou Etape : 14/23 Maintenant que le menu est adapté pour les écrans de bureau et la majorité des tablettes, il nous faut l'optimiser pour une utilisation sur smartphones et écrans de moins de 800 pixels.nous allons donc créer et ajouter aux liens une classe nommée "smartphones-links" afin de pouvoir leur donner un design, les rendants ainsi plus visibles. 8 / 13

9 Etape : 15/23 Et pour notre code CSS : Etape : 16/23 Occupons-nous du bouton "menu". Nous allons dans un premier temps l'ajouter à notre code HTML, juste au-dessous de l'ouverture de la. Le bouton est simplement constitué d'un lien placé dans une. Je lui attribue égamenment la class "bold" afin de renforcer son visuel. Intégrons le à notre code HTML. 9 / 13

10 Etape : 17/23 Occupons nous maintenant de son affichage. Celui-ci ne doit etre visible qu'en dessous de 800 pixels de largeur de résolution. Nous allons donc lui aplliquer un "display:none" par défault et un "display:block" pour notre media queries max-width: 800px. Dans notre feuille css Etape : 18/23 Donnons maintenant aux visiteurs mobiles la possibilité de rétracter le menu. Pour ce faire, nous allons utiliser la bibliothèque JQuery et la fonction "slidetoggle". Pour pouvoir utiliser la bibliothèque JQuery, il nous faut tout d'abord l'appeller dans notre feuille HTML en insérant le codes uivant dans le de notre page 10 / 13

11 Etape : 19/23 Pour pouvoir faire fonctionner notre slide, nous allons ajouter un id, nommé "menu-scroll", au lien contenu dans notre "bouton-menu". Celui-ci va nous permettre d'écouter et de détecter un évènement qui déclenchera le slide. Le slide sera alors appliqué à l'élément grace à la fonction "slidetoggle". Nous lui attribuerons également une vitesse de rétractation plutot lente. Etape : 20/23 Ca y est, notre menu coulisse bien lorsque nous cliquons sur le bouton "menu". Seule ombre au tableau, les éléments se chevauchent de façon anarchique... Nous aloons y rmédier grace à quelques lignes de code CSS en utilisant la propriété Zindex 11 / 13

12 Etape : 21/23 Supprimer les curseurs: Pour supprimer les curseurs, nous allons d'abord leur ajouter une classe "curseur" dans le code HTML. Puis, dans la media queries dédiée aux écrans de 800 pixels et moins, nous lui appliquerons un "display:none;". Coté HTML Etape : 22/23 Coté CSS. Notre création d'un menu Responsive est maintenant terminée. Il ne vous reste plus qu'à retravailler un peu le code CSS afin de personnaliser cet exemple et le mettre en accord avec le design de votre site. 12 / 13

13 Etape : 23/23 13 / 13 Powered by TCPDF (