article(s) dans votre panier VOIR

Navigation responsive avec le framework Materialize CSS

  • Vidéo 10 sur 20
  • 2h22 de formation
  • 20 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Navigation adaptive pour tous les écrans
00:00 / 10:04
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Détails de la formation

Dans cette vidéo pour maîtriser Materialize CSS, l’auteur vous apprend comment créer une navigation adaptive pour tous les écrans. L’objectif de ce cours consiste à réaliser des éléments de navigation à partir des fonctionnalités proposées par Materialize CSS. Pour y parvenir, vous devez créer les balises et à l’intérieur vous saisissez le code .nav-wrapper. la couleur de votre choix que vous associez à votre Div. Cela terminé, vous utilisez un code HTML pour créer la navigation à partir d’une liste à puces. Pour cela, vous utilisez le code ul>li*le nombre de lien>a. En appuyant sur la touche Tabulation, vous avez le code HTML qui est généré automatiquement. Une fois la création de la liste à puces terminée, vous insérez le nom des liens qui vous convient. Pour gérer la place des éléments de navigation sur votre page, vous ajoutez une classe à la balise

    . La classe right permet de le placer à droite de l’interface. Par ailleurs, pour créer un logo avec une taille de texte plus grande que les autres, vous utilisez la classe brand-logo. Cette classe doit être accompagnée par la balise avec un lien qui affiche le logo. Dans la mesure où l’écran change, vous remarquez que les éléments se chevauchent. Pour éviter cela, vous pouvez masquer des éléments lorsque la page est consultée sur un écran de petite taille. Pour ce faire, vous utilisez la classe hide-on-med-and-down. Pour conclure, vous savez maintenant comment faire pour adapter votre site web en fonction de la taille des écrans.