Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Positionner le menu principal au premier point d'arrêt

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez positionner le menu principal de votre page au niveau du plus petit point d'arrêt. Ainsi, vous allez permettre au menu de glisser au-dessus du reste de la page.

Transcription

Un autre élément que nous devons finaliser, c'est le menu dans la mise en page « Tablette portrait ». Ce menu sera caché par défaut. Et il sera révélé quand l'internaute ira cliquer sur ce gros bouton. Alors dans cette vidéo, nous allons commencer le processus d'animation de ce menu, en allant vérifier son positionnement dans la mise en page « tablette portrait » quand il sera bien sûr affiché. Alors petit détour rapide d'abord par le code HTML, histoire de se le remettre en mémoire. Donc je suis dans un div qui s'appelle « mainNav » et voici donc la zone de navigation. Donc c'est une balise ul tout simplement, donc c'est la liste des liens de la barre de navigation principale de ce site. Au niveau de ma feuille de style, rappelons-nous que les modifications à apporter ne doivent affecter que la mise en page « tablette portrait » c'est-à-dire les écrans de largeur inférieure ou égale à 1023 pixels. Puisqu'à partir de 1024, j'ai une autre disposition ici, qui se met en place. Donc allons-y. Je vais créer une nouvelle « media query ». Cette fois-ci se sera « max-width », « est égal à 1023 pixels », donc. Et puis je ne vais pas oublier ces petites accolades, et la première que je vais faire, c'est de m'adresse à l'intérieur de l'élément « mainNav » à cet élément ul, et comme il est caché pour le moment, je vais le révéler pour pouvoir travailler avec, donc « display a block ». Voilà, je reviens sur ma page web. Je rafraichis ma page, et vous voyez que ce menu apparait convenablement. Mais vous voyez aussi que ce menu a poussé les autres éléments de la page vers le bas. Et ça, je n'ai pas envie que ça se produise, puisque mon designer m'a clairement donné pour instructions que ce menu doit s'ouvrir au-dessus des autres éléments de la page. Donc sans pousser les autres éléments de la page vers le bas. Autrement dit, dans ma feuille de style, je vais maintenant m'adresser à mon élément « mainNav ». Et je vais changer son mode de positionnement, donc je vais lui dire « position = absolute ». C'est ça qui va me permettre de superposer cet élément aux autres éléments de la page. Donc revenons au niveau de la page, ici, petit rafraichissement, et vous voyez bien que le menu peut maintenant se superposer aux autres éléments. Vous voyez également que par défaut, ce menu est à l'arrière-plan. Donc je vais changer tout cela au niveau de mon éditeur de code, en lui donnant ici un « z-index », alors de valeur assez élevée, je vais mettre 1000 par exemple. Ça permet à cet élément maintenant, de revenir à l'avant-plan. Le voici. Il reste encore à régler le problème de sa largeur. Donc je vais revenir ici. Je vais lui donner une largeur, une « width » de 100%. Voilà, je sauvegarde ma feuille de style, je reviens dans le navigateur. Et donc voici le menu qui se superpose correctement aux autres éléments. Donc je vais pouvoir le recacher. Là, je vais retirer ici ce « display block ». Je sauvegarde, je reviens dans ma page. Vous voyez qu'à cause de ce que j'ai fait, c'est toute la zone « mainNav » qui se superpose aux autres éléments, et pas uniquement le menu. Alors pour pallier à ce problème, je vais faire un clic-droit ici, sur cette zone de menu, pour aller l'inspecter dans Google Chrome et là, je me rends compte que ce « div mainNav », vous le voyez ici, dans le coin supérieur gauche du « div », il a une hauteur de 100 pixels. Donc je vais revenir ici, au niveau de ma feuille de style, et je vais m'adresser maintenant à l'élément « Title », qui suit donc la barre de menu dans mon site, et je vais lui donner une « margin top » de 100 pixels, pour compenser donc. Voilà. Et quand je fais cela, quand je reviens ici, au niveau de mon navigateur, voilà le problème est résolu, donc mon menu n'apparaitra pas par défaut, et puis quand il apparait, avec « display block » ici, il est correctement superposé à mes éléments. Voilà, donc j'ai positionné convenablement ce menu. Je vais aller nettoyer un petit peu ma feuille de style, puisque je n'ai pas besoin de ce style en particulier, et donc je suis prêt maintenant à passer à l'animation en tant que telle de ce menu.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !