Bienvenue de nouveau au cours de KnowledgeCity sur les feuilles de style en cascade. Je suis Cliff Brozo, je suis votre instructeur. Et aujourd'hui, vous l'avez deviné, nous allons parler de menus. Nous allons regarder quelques menus déroulants, nous allons regarder l'animation sous la forme d'un cercle, nous allons faire glisser le menu de la barre latérale, nous allons explorer ce qu'est un menu collant du bas, et il y aura un bonus à la fin. Avez-vous envie d'apprendre? Je suis, allons-y. Nous allons commencer par un simple menu déroulant. Et le menu déroulant peut comporter autant de listes déroulantes comme vous voulez. Dans ce cas, celui-ci juste à droite de l'écran, nous allons regarder l'animation. Et quand vous pouvez cliquer sur un menu de hamburgers, et tout d'un coup, nous avons des sous-menus qui apparaissent. Et je vais te demander d'essayer de te souvenir une partie de votre géométrie de 10e année comme nous discutons des plans x, y et z dans l'espace 3D. Les navigations coulissantes sortent du côté lorsque vous cliquez sur un menu ouvert, et vous avez le choix de sous-menus une fois que les menus sont ouverts. Bien sûr, vous pouvez fermer le menu. Les menus du bas collants sont des choses auxquelles nous sommes habitués si vous avez déjà utilisé votre téléphone, toutes les navigations en bas. Et fidèle à la forme, nous pouvons également le faire sur une page Web. Enfin, j'ai parlé un peu d'un bonus, nous verrons comment insérer des icônes dans votre menu. Jetons un coup d'œil à la façon dont tout cela fonctionne. Nous allons commencer par un menu déroulant. Le code pour cela a une liste simple HTML non ordonnée, qui comporte un, deux, trois éléments, et un quatrième élément qui fait la liste déroulante. J'ai créé une classe appelée drop button. Et c'est en CSS. Et c'est ce que je vais appeler afin de faire fonctionner cette fonctionnalité déroulante. Jetons un coup d'œil à son fonctionnement. Rien ne se passe lorsque je survole la ville de la connaissance. Rien ne se passe lorsque je survole la programmation informatique. Rien ne se passe pour l'icône de la barre de navigation. Mais quand j'arrive à CSS, c'est celui qui a le bouton de suppression de classe. Ce que ça me permet de faire, est de choisir des sous-menus dans cette liste. Alors que je les survole, les couleurs changent, et c'est ce qui est géré en CSS. Voici le code. La partie principale de ce code traite du contenu déroulant. Le reste est similaire aux menus de navigation normaux. Mais notre contenu déroulant me permet de survoler quelque chose et changez les couleurs à cause de cette section de survol. Alors que normalement ma couleur de fond est la mousseline de citron dans la liste déroulante. Quand je survole, j'ai changé la couleur d'arrière-plan au bleu Dodger. Cela se produit à la ligne 56. Dans le CSS, la couleur devient mousseline de citron, et la couleur d'arrière-plan est le bleu Dodger. Alors que je m'éloigne, et je ne survole pas ces éléments, alors la couleur de fond est en mousseline de soie citron, et la couleur du texte est le bleu Dorger. Encore une chose à propos de cette zone de liste déroulante. Nous avons un arrière-plan ombré. Et comme vous pouvez le voir, j'ai une ombre de boîte à la ligne 41 ici. Vous vous souviendrez de l'ombre de la boîte d'une leçon précédente où nous avons parlé jusqu'où l'ombre va vers la droite, jusqu'où, combien de dispersion, et quelle est la couleur de l'ombre. Et cela nous permet de créer un menu déroulant. La prochaine étape est notre menu de cercle. Notre menu circulaire est affiché dans un navigateur de taille normale. Au milieu, j'ai un cercle avec trois lignes dedans, et cela ressemble à un menu de hamburgers normal. Et j'ai ajouté dans le plan x, y et z pour montrer comment ces lignes vont réellement bouger. En survolant le menu, il grossit. Lorsque je clique dessus, les sous-menus apparaissent. Quand je clique à nouveau pour le fermer, les menus disparaissent. Jetons un coup d'œil au code HTML derrière cela. Le code est standard. Je commence par l'image qui me montre mon petit graphique de x, y et z. Et puis j'utilise le type d'entrée de la case à cocher pour que je sache quand quelque chose a été cliqué et lorsqu'ils cliquent sur le menu Ouvrir, Je sais que je suis censé appeler cette fonction, quand ils cliquent sur le X, Je sais que je suis censé fermer le menu. La partie sur la géométrie de 10e année entre maintenant. Nous avons trois lignes, et ces trois lignes vont bouger, celui du milieu va disparaître. Les deux autres vont tourner de haut en bas. Et vous devez surveiller attentivement ce qui se passe. Les éléments qui apparaîtront sont les éléments de mes liens vers d'autres pages. Cliquons dessus plusieurs fois pour voir cela se produire. Maintenant tu dois regarder attentivement, ce qui va se passer est le coin supérieur droit va baisser de 45 degrés. Le coin inférieur droit va monter de 45 degrés, et cela va former la lettre X. Lorsque cela arrive, la ligne médiane va disparaître. Regardons quelques fois. Regardez attentivement pendant que je clique dessus plusieurs fois. (musique entraînante) Regardons le code CSS. Nous commençons avec notre bouton ouvert. Et le bouton Ouvrir est codé avec un rayon de bordure de 100%. Et cela me donne un cercle parfait. Je crée la largeur et la hauteur de ce cercle à 80 pixels, et je l'ai mis dans une position absolue. Je le déplace de 85 pixels de la marge gauche, et comme il s'ouvre, je veux faciliter la transition. Vous remarquerez maintenant que ce code de la ligne 32 à 37 semble être écrit deux fois. Et c'est parce que différents navigateurs besoin de voir le code de différentes manières. La section WebKit du tableau de bord est conçu pour les navigateurs qui ont besoin de le voir de cette façon, comme les autres navigateurs peut simplement traiter une transformation directe. Je vais traduire les choses dans un espace tridimensionnel. Et j'ai un emplacement x, un emplacement ay, et l'emplacement az. Si vous pensez à x comme un va-et-vient, y est à gauche et à droite, et z est haut et bas, vous aurez une idée de la façon dont ces choses se déplacent dans un espace tridimensionnel.
