Aujourd'hui, à la demande de mes amis, j'écrirai un tutoriel simple sur l'effet d'un menu coulissant sur mon site Web ; dans le département de logiciels de l'Université de Niujiang, il semble que les publicités sur Itnow soient également disponibles. utilisez cet effet. Lorsqu'il n'est pas utilisé, Masqué, lorsque vous cliquez sur le calque du bouton, il glissera lentement vers l'extérieur, ce qui permettra d'économiser un espace de page limité et d'obtenir un effet visuel enviable, qui semble plutôt agréable. Vous pouvez cliquer ici pour voir cet effet.
Passons aux choses sérieuses et arrêtons de dire des bêtises. Les préparations sont les suivantes :
1. Créez un nouveau document vierge dans dw (ou ouvrez la page à laquelle vous souhaitez ajouter des effets).
2. Définissez votre propre style CSS.
3. Insérez un tableau de 500 pixels de long sur la page (notez ici : le but de l'insertion du tableau est de maintenir la position relative de la couche de contrôle inchangée à différentes résolutions. Si votre page n'a pas défini les paramètres pertinents auparavant, vous devrez peut-être le faire. Passez du temps à organiser la structure de votre page).
4. Placez le curseur dans le tableau, cliquez sur le menu [Insérer - Calque] pour insérer un calque d'une longueur de 500 et d'une hauteur de 20, et nommez-le calque1.
5. Placez ensuite le curseur dans le calque layer1, cliquez sur le menu [Insérer - Layer] et insérez un calque layer2 d'une longueur de 500 et d'une hauteur de 130 ; définissez la marge gauche et la marge supérieure des propriétés du layer2 à 0 ; C'est une couleur de fond que vous aimez.
6. Répétez ensuite la méthode de l'étape 5 et insérez un calque layer3. Ce calque n'a aucune utilité particulière. Dans mon tutoriel, je souhaite juste placer quelques boutons. Au final, le mien s'est avéré comme ceci :
CONSEILS : Le but de cette opération est d'ajouter un déflecteur devant le calque que vous souhaitez faire glisser. Ce n'est que lorsque vous cliquez dessus que le calque glissera lentement sous votre calque.
Nous entrons maintenant officiellement dans le processus de production du menu coulissant que nous allons créer aujourd'hui.
Maintenant, répétons à nouveau l'étape 5 ci-dessus, insérons un autre calque layer4, définissons les propriétés du calque sur la largeur 500 et la hauteur 150, ce qui correspond exactement à la somme des hauteurs du calque2 et du calque3, et ajustons le calque layer4 aux deux autres calques ci-dessous. . Comme le montre l'image :
Ensuite, nous cliquons sur l’œil devant le calque 2 pour le fermer, afin que nous puissions voir le calque 4 en dessous.
À ce stade, nous cliquons sur ALT + F9 pour ouvrir le panneau de chronologie. DW a ajouté la chronologie par défaut Timeline1 pour nous. Ensuite, nous sélectionnons le calque que nous voulons faire glisser, layer4, faisons un clic droit dessus et sélectionnons [Ajouter à la chronologie. ] À ce moment-là, nous pouvons voir le calque layer4 que nous venons de créer dans le panneau de la chronologie, ce qui montre que nous l'avons ajouté avec succès ! 
Ensuite, nous cliquons sur la 15ème image de la timeline et ajustons la marge supérieure dans le panneau des propriétés du calque 4 à 150. À ce stade, un calque coulissant est prêt. Vous pouvez faire glisser lentement le carré rouge sur la timeline de 1 à 15, et vous pouvez voir votre calque glisser lentement du dessous du calque2 et du calque3 sortir ! 
D'accord, il ne nous reste plus qu'à définir une action pour ce calque coulissant layer4 pour l'activer, et c'est fini :) Avant cela, j'ai inséré un tableau sur le layer3 que j'ai ajouté et j'en ai défini deux pour le bouton layer4.
Nous avons d’abord configuré l’action pour activer le calque coulissant. Sélectionnez Développer ce bouton, accédez au panneau Comportement et cliquez sur
Sélectionnez [Timeline - Playback Timeline] dans le menu qui apparaît. DW fera apparaître un formulaire, sélectionnez timeline1 dans le menu déroulant ci-dessus.
Confirmez ensuite que l'événement est activé, cliquez dans le panneau de comportement
D'accord, ici vous pouvez le prévisualiser. Lorsque vous cliquez sur le bouton Développer, vos calques glisseront lentement de haut en bas !
Qu'en est-il, vous pouvez le voir :) Ajoutons une simple action de fermeture au calque, c'est-à-dire que le calque sera masqué après avoir cliqué sur le bouton de fermeture. Sélectionnez le bouton Fermer, accédez au panneau Comportement et cliquez sur Sélectionnez [Afficher les calques cachés] dans le menu qui apparaît, sélectionnez le calque 4 dans le formulaire contextuel, puis cliquez sur le bouton Masquer ci-dessous pour le masquer, comme indiqué dans la figure : 
D'accord, je l'ai prévisualisé à nouveau et j'ai constaté qu'après l'avoir développé, j'ai cliqué pour fermer le calque et il a disparu :) Cependant, il semble y avoir un problème lorsque j'ai cliqué à nouveau pour développer, rien ne semble se produire. avoir une action qui n’a pas été définie.
Répétez l'étape 5 tout à l'heure, sélectionnez le bouton de développement, ajoutez l'action [Timeline - Go to Timeline Frame], sélectionnez timeline1 dans le menu déroulant du formulaire contextuel et ajoutez 1 au numéro d'image.
Eh bien, cet aperçu a révélé que ce problème a été résolu. Mais nous semblons avoir négligé un problème. Après avoir cliqué pour fermer, le calque est défini sur masqué, puis cliquer pour agrandir ne répond pas. Utilisez simplement l’ancienne méthode et ajoutez une action au bouton de développement pour résoudre le problème !
Répétez l'étape 5 et sélectionnez [Afficher le calque caché]. Contrairement à l'étape 6 de tout à l'heure, cette fois nous sélectionnons Afficher. Après confirmation, assurez-vous que l'heure à laquelle le calque caché est affiché dans le panneau de comportement est au clic. Le panneau de comportement du bouton développé à ce moment est le suivant :
OK, prévisualisez à nouveau, tout va bien !
À ce stade, l'effet est terminé. Bien sûr, chacun peut créer de meilleurs effets par lui-même, mais cela reste le même tant que nous maîtrisons l'utilisation de la chronologie et des comportements d'action, tous les effets ne sont qu'une question d'opération : )