Le menu déroulant est l'un des effets les plus courants sur Internet. Il suffit de cliquer ou de déplacer la souris pour faire apparaître un menu plus détaillé. Il permet non seulement d'économiser de l'espace sur la mise en page Web, mais également de la rendre concise et intuitive. ordonné, mais c'est aussi un roman. Le magnifique menu déroulant ajoute beaucoup de couleur à votre page Web.
Il existe de nombreuses façons de créer des menus déroulants. Cette colonne vous présentera quatre méthodes couramment utilisées, vous permettant de créer votre propre menu déroulant à votre guise.
■ Utilisez Dreamweaver pour créer des menus déroulants
??Dreamweaver est l'outil le plus couramment utilisé pour créer des menus déroulants. Il dispose d'une méthode simple et d'un contrôle gratuit. Il peut créer des styles de menu dans la mesure du possible.
??Le principe de l'utilisation de Dreamweaver pour créer un menu déroulant est très simple. Il utilise la méthode intégrée Afficher-Masquer les calques dans le panneau Comportements et utilise onMouseOver (la souris se déplace vers) et onMouseOut (la souris s'éloigne) pour créer un menu déroulant. déclenchez le masquage et l'affichage du calque, et le menu qui apparaîtra se trouve dans le calque.
??Par conséquent, nous pouvons créer un menu déroulant en quatre étapes. Tout d'abord, nous avons besoin d'une barre de navigation, qui est utilisée pour placer le menu principal qui apparaît en premier devant le spectateur, puis nous créons le menu déroulant qui apparaît. apparaîtra après avoir été masqué ; et ensuite, l'étape la plus critique consiste à ajouter l'effet de masquage et d'affichage des calques au menu principal et au menu déroulant. Enfin, nous embellissons le menu ; L'effet final que vous voyez est celui indiqué sur la figure. Vous pouvez également visiter l'adresse suivante : menu.htm.
??Je crois que vous ne pouvez plus attendre, alors commençons tout de suite !
1. Réalisation de la barre de navigation
Tout d'abord, effectuez les travaux préliminaires nécessaires. Appuyez sur CTRL+J pour ouvrir la fenêtre Propriétés de la page. Les paramètres sont tels qu'illustrés dans la figure 2. Ce paramètre aura un impact sur la position du menu, veuillez donc le définir comme indiqué dans la figure 2. image.
Appuyez sur CTRL+F2 pour ouvrir le panneau Objets et cliquez sur le bouton Calque
Enfin, maintenez la souris enfoncée et faites glisser un calque sur la page, puis définissez les paramètres dans le panneau Propriétés du calque. Remplissez la zone ID du calque avec le titre et remplissez les zones L, T, W et H. avec 8, 15 et 15 respectivement 480, 15, remplissez la couleur d'arrière-plan avec #006699, comme indiqué sur l'image.
Déplacez le curseur à l'intérieur du calque et cliquez sur le bouton Tableau du panneau Objets.
, insérez un tableau avec une ligne et quatre colonnes et configurez-le comme indiqué sur la figure.
Maintenez la touche CTRL enfoncée et cliquez sur les quatre cellules du tableau, puis définissez leur largeur sur 120 et saisissez le texte dans les deux premières cellules, qui est le nom de votre menu principal. Vous pouvez saisir le nom que vous souhaitez. "Classic Forum" et "Tianji.com" comme exemples et liens ajoutés.
2. Création d'un menu déroulant
Commencez maintenant à créer le menu qui apparaîtra sous forme de liste déroulante, en utilisant également des calques.
Insérez à nouveau un calque à partir du panneau Objets sous la barre de navigation que nous avons créée précédemment. Remplissez les paramètres comme suit : remplissez la zone ID du calque avec menu1, remplissez les zones L, T, W et H avec 8, 34, 120. , et 80 respectivement. Remplissez la couleur d'arrière-plan avec #999966. Les deux paramètres L et T servent à définir la distance entre ce calque et les bordures gauche et supérieure de la fenêtre. Ils ne doivent pas être mal renseignés, sinon le menu s'affichera. être égaré et la convivialité une fois terminé sera affectée.
À ce stade, nous pouvons saisir le contenu du menu souhaité dans la couche menu1. Pour faciliter la mise en page, j'utilise toujours des tableaux pour créer des menus ici. Cette couche apparaîtra sous la forme d'un menu déroulant pour "Forum Classique", remplissez les liens de menu dont vous avez besoin. De la même manière, créez un menu déroulant (layer menu2) pour "Tianji.com".
Ce qu'il faut noter dans cette étape, c'est que la position du calque (menu1, menu2) où se trouve le menu déroulant est très importante (déterminée par les deux paramètres L et T). Leur bord supérieur doit être proche du bord inférieur de la barre de navigation, afin de garantir que le menu puisse être utilisé normalement après avoir terminé la troisième étape. Car si vous restez éloigné de la barre de navigation, le menu disparaîtra dès que la souris quittera la barre de navigation.
Appuyez sur F2 pour ouvrir le panneau CALQUE, qui répertorie les trois calques de la page Web. Cliquez sur l'espace devant menu1 et menu2, et l'icône en forme d'œil fermé apparaîtra et ces deux calques seront masqués. Cette étape est effectuée car l'état initial du menu déroulant est invisible.
3. Ajout d'effets d'affichage et de masquage
Cette étape est cruciale pour transformer la décadence en magie. Veuillez me suivre attentivement.
Cette étape est divisée en deux parties : premièrement, ajoutez une commande pour contrôler l'affichage et le masquage du menu principal dans la barre de navigation. Deuxièmement, ajoutez une commande pour contrôler l'affichage et le masquage du menu déroulant lui-même ;
1. Dans la section de la barre de navigation, maintenez d'abord la touche CTRL enfoncée et cliquez sur la première cellule de la barre de navigation. Appuyez maintenant sur Maj+F3 pour ouvrir la fenêtre Comportements et cliquez.
et sélectionnez "Afficher-Masquer les calques" dans l'option déroulante (comme indiqué dans l'image). S'il n'y a pas d'élément de ce type dans les options, sélectionnez IE 5.0 sous Afficher les événements pour, cliquez à nouveau sur le bouton et "Afficher-Masquer les calques" apparaîtra.
Une fenêtre apparaîtra, comme indiqué ci-dessous. Dans la zone Couches nommées, toutes les couches de la page Web actuelle seront répertoriées. Sélectionnez "couche "menu1" " car nous voulons que la couche menu1 réponde au " Forum classique ". Cliquez ensuite sur le bouton « Afficher » ci-dessous et OK.
À ce stade, vous reviendrez à la fenêtre Comportements et les mots indiqués ci-dessous apparaîtront dans la fenêtre. Cliquez sur le texte « onClick » sous Événements, et une petite flèche vers le bas apparaîtra et sélectionnez onMouseOver dans la liste déroulante. option vers le bas. Le but de cette étape est de changer l'état du menu déroulant menu1 en Afficher lorsque la souris passe à la première cellule.
L'étape suivante consiste à masquer le menu déroulant menu2 lorsque la souris se déplace vers la deuxième cellule.
Commandez à nouveau bouton, sélectionnez "Afficher-Masquer les calques" dans l'option déroulante et sélectionnez "couche "menu1" " dans la fenêtre contextuelle, car nous voulons que la couche menu1 réponde au "Forum classique". Cliquez ensuite sur le bouton « Masquer » ci-dessous et OK.
Revenez à la fenêtre Comportements, cliquez sur la petite flèche vers le bas et sélectionnez onMouseOut dans l'option déroulante.
2. Dans la partie menu déroulant, sélectionnez d'abord le calque menu1 en cliquant sur le bord du calque ou en cliquant sur menu1 dans le panneau LAYER. Utilisez la même méthode que la partie barre de navigation pour ajouter des commandes pour l'afficher et le masquer dans la fenêtre Comportements. . L'effet de ceci est que lorsque la souris quitte le menu calque1, le menu calque1 est automatiquement masqué. L'état du menu du dernier calque1 est tel qu'indiqué sur la figure.
3. Répétez les deux parties ci-dessus et ajoutez des commandes d'affichage et de masquage des calques pour le deuxième menu principal "Tianji.com" et le menu des calques2 de la barre de navigation.
4. Embellissement et modification des menus déroulants
À ce stade, l'effet fonctionnel du menu déroulant a été implémenté et vous pouvez le voir maintenant en appuyant sur F12. Cependant, vous devez également constater que le menu est un peu moche, que les polices ne sont pas assez fines, que la couleur par défaut des liens des options de menu n'est pas belle et que le menu n'a pas de bordures, alors donnons-lui un peu de beauté. .
1. Définissez le style de police du menu. Appuyez sur Maj+F11 pour ouvrir le panneau Style CSS et cliquez sous le panneau.
bouton
Sélectionnez la balise td dans la zone Balise de la fenêtre contextuelle « Nouveau style », sélectionnez le deuxième élément Redéfinir la balise HTML pour le type et sélectionnez Ce document uniquement pour Définir, comme indiqué dans la figure.
À ce stade, la fenêtre de configuration apparaît. Indépendamment d'autres choses, sélectionnez simplement 12 dans la zone Taille à droite, et l'unité est le pixel.
2. Définissez le style du lien de menu. Dans le panneau de style, cliquez sur le bouton situé sous le panneau. Dans la fenêtre contextuelle, sélectionnez le troisième élément Utiliser le sélecteur CSS pour le type, sélectionnez la balise a:hover dans la zone Balise et sélectionnez Ce document. Uniquement pour Define, comme indiqué sur la figure.
Après avoir cliqué sur OK, dans la fenêtre contextuelle, remplissez #ff9933 pour Couleur, sélectionnez aucun pour Décoration et cliquez sur OK.
Revenez au panneau de style et cliquez sous le panneau , dans la fenêtre contextuelle, sélectionnez le troisième élément Utiliser le sélecteur CSS pour le type, sélectionnez la balise a:link dans la zone Balise et sélectionnez Ce document uniquement pour Définir.
Après avoir cliqué sur OK, dans la fenêtre contextuelle, remplissez #ffffff pour Couleur, sélectionnez aucun pour Décoration et cliquez sur OK.
Revenez au panneau de style et cliquez sous le panneau , dans la fenêtre contextuelle, sélectionnez le troisième élément Utiliser le sélecteur CSS pour le type, sélectionnez la balise a: visité dans la zone Balise et sélectionnez Ce document uniquement pour Définir.
Après avoir cliqué sur OK, dans la fenêtre contextuelle, remplissez #ffffff pour Couleur, sélectionnez aucun pour Décoration et cliquez sur OK.
3. Définissez le style de bordure de menu dans le panneau de style, cliquez sur le bouton sous le panneau, dans la fenêtre contextuelle, sélectionnez la balise td dans la zone Balise, sélectionnez le deuxième élément Redéfinir la balise HTML pour le type et sélectionnez Ce document uniquement pour définir , comme le montre la figure.
La fenêtre des paramètres apparaît, sélectionnez Bordure dans la liste de gauche, entrez la largeur des quatre côtés de droite comme 1, définissez la couleur sur noir #000000 et sélectionnez solide comme style.
À ce stade, nous avons réussi. Utilisez-le sur votre page Web maintenant.