Comment utiliser la technologie CSS pour obtenir des effets spéciaux sympas dans les listes déroulantes

Cet article vous présente une liste déroulante sympa implémentée en utilisant CSS. L'effet après la mise en œuvre est vraiment bon. Le processus de mise en œuvre détaillé et un exemple de code sont donnés dans l'article. Les amis intéressés peuvent y jeter un œil ci-dessous. un regard.

Regardons d'abord les rendus à réaliser

Je souhaite faire un tel L'effet est toujours fastidieux, mais le code n'est pas difficile à comprendre.

Tout d’abord, jetons un coup d’œil au code HTML.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <p classe="conteneur">

2.  <p classe="titre">

3.  <h2>Sélection personnaliséeh2> ;

4.  p>

5. 
   

6.  <p class="select">

7.  <p>Veuillez sélectionnerp>

8.                 <

li

9. donnée-valeur="HTML5">HTML5li >   <

li

10. donnée-valeur="CSS3">CSS3li >                                       >"JavaScript"

    >
JavaScript
11. li>     <li data-value="JQuery"
    >
JQuery
12. < /

    li>    <li data -value="Backbone"

    >
Backbone
13. li>  ul>
;/

14. p>

p> ;

On voit que nous n'utilisons pas l'élément select natif, mais utilisons d'autres éléments pour simuler cet effet. Nous avons spécifié data-value pour l'élément li, principalement parce que nous utiliserons JQuery pour obtenir la valeur sélectionnée et la placerons sous l'élément p.

Regardons le code CSS étape par étape.

Code CSSCopier le contenu dans le presse-papiers

1. * {

2. marge : 0

3. rembourrage :

   <🎜 >
4. }

6. html {

7. police - famille : 'Terminal'

8. }

corps {
11. couleur de fond

     :

    #33CC66

12. } Réglez sur 0. 2. Définissez la police par défaut de la page Web sur Terminal et la taille de la police sur 62,5 %, soit 10 px.

3. Définissez la couleur d'arrière-plan sur #33CC66.

Code XML/HTML

Copier le contenu dans le presse-papiers

<

lien href=

'http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis'

1. rel

   ='stylesheet' type='text/css'> Nous avons utilisé la police Terminal ci-dessus, et nous utiliserons également la police Lobster ensuite, utilisez donc cette ligne de code pour ajouter une référence. 1. Précisez le titre, sélectionnez la largeur et précisez son centrage horizontal. 2. Modifiez la largeur du titre, principalement pour le rendre plus large que la sélection et plus beau. Précisez ensuite ses marges supérieure et inférieure. 3. Définissez la police, la taille de la police et la couleur de l'élément h2 sous le titre.

Code CSS

Copier le contenu dans le presse-papiers

.select > , .select ul {

couleur de fond :

#ffffff

🎜>taille de police
2.  : 2rem

 
3. bordure

   -rayon : 5px ;

4.  marge inférieure : 0 ;                                                                   

5. alignement du texte

    : gauche ;

6. rembourrage

    :

 
7. position

    :

   relatif
 ; 
 
9. bordure inférieure

   -

   droite
10. droite

    -rayon : 0 ; 🎜>

11.  

    curseur : pointeur

    ; 

12.         couleur : rgba(102, 102, 102, .6);   

13.     }   

14. .select > p:après {   

15.         affichage : blocage ;   

16.         largeur : 10px ;   

17.         hauteur : 10px ;   

18.         contenu : '' ;   

19.         position : absolue ;   

20.         haut : 1,4rem ;   

21.         droitedroite : 2rem;   

22.         bordure inférieure : 1px solide #33CC66 ;   

23.         bordure gauche : 1px solide #33CC66 ;   

24.         transformation : rotation (-45 deg);   

25.         transition : transformer .3s d'assouplissement, haut .2s d'assouplissement ;   

26.     }  

1、设置 p 和 ul 元素的背景颜色和边框等设置。

2、为 p元素单独指定样式，并设置其 position 属性，主要是为了下面绘制右侧的下拉按钮。

3、利用 :après 在p元素的右方绘制下拉按钮，可以看出来，我们是利用-45 度 模拟的这个效果。值得注意的是, 们需要将其   display 设置为 block, 并且设置宽高，否则看不到 这个效果。

Code CSS复制内容到剪贴板

1. .select ul {   

2. marge supérieure : 0 ;   

3.     bordure-haut-gauche-radius : 0 ;   

4.     bordure-haut-droitedroite-radius : 0 ;   

5.     list-style-type : aucun ;   

6.     curseur : pointeur ;   

7.     débordement-y : auto;   

8.     hauteur maximale : 0 ;   

9.     transition : hauteur maximale 0,3 s d'assouplissement ;   

10. }   

11.   

12. .select ul li {   

13.     remplissage à gauche : 0,5rem ;   

14.     affichage : bloc ;   

15.     hauteur de la ligne : 3rem ;   

16.     text-align : gauche ;   

17. }  

1、设置 ul 的一些默认属性，并将其设置最大宽度为 0，指定 overflow-y为 auto ,标签始终占不满ul 的一行，那是因为其默认有 margin et padding ，所以在一开始的时候就将网页中所有元素的外边距和内边距设置成了 0。

Code CSSCopier le contenu dans le presse-papiers

1. .select.open ul { 

2.  

   hauteur maximale : 20rem

3. transformation-origine : 50% 0; 🎜>

   -webkit- animation : introduction coulissante .5s

4. }

6. .select .open > p:après {

 
8. haut

    :  transformation : rotation (-225 deg); 

9. transition : transformation en facilité de 0,3 s, haut en entrée d'aisance en 0,2 s

10. }

11. 1. est ouvert Définissez la hauteur maximale et animez-la. 2. Faites pivoter le bouton déroulant de -225 degrés et attribuez-lui une animation.

Jetons un coup d'œil à l'effet d'animation déroulant spécifié pour l'élément ul, qui est également la clé de cet effet déroulant.

Code CSS

Copier le contenu dans le presse-papiers

@-webkit- images clés slide-down {

0% {

transform: scale(1, 0); 🎜> }                                                                                                                                   🎜>}
50 %{
Transformation : Échelle (1, 0,75 ); 
75% { 
                                                                                                               }
100 % {
transformer : scale(1, 1);
}
}
Vous le comprendrez peut-être après avoir vu le code ci-dessus, qui consiste à changer constamment la taille de ul afin qu'elle soit comprise entre 0,75 et 1,25, mettez-le à l'échelle, afin qu'il ait cet effet de saut.

10. Vous trouverez ci-dessous quelques codes CSS simples, que je n'expliquerai pas davantage.

Code CSS

12. Copier le contenu dans le presse-papiers

13. .select ul li : survolez {
couleur de fond
15.  : rgba(102, 153, 102, 0.4

16. }

.select .selected {

couleur de fond

 : rgba (102, 153, 102, 0.8);

}

CSS Maintenant que nous avons terminé, regardons comment nous utilisez JQuery pour contrôler cet effet.

1. Nous n'avons pas besoin de télécharger JQuery pour l'utiliser, car de nombreux sites Web proposent désormais des services CDN, comme le BootCDN que j'utilise.

2. Code XML/HTML

   Copier le contenu dans le presse-papiers
4. <
   script
5. src

   =

   "http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"
6. >
   script
7. >

Vous pouvez utiliser JQuery ci-dessous .

Code XML/HTML

Copier le contenu dans le presse-papiers

1. <script>  

2.     $(document).ready (function () {   

3.         $('.select ul li').on("click", function (e) {   

4. var _this = $(this);   

5.            $('.select >p').text(_this.attr(' valeur de données'));   

6.             $(_this).addClass('selected').siblings().removeClass('selected');   

7.             $('.select').toggleClass('open');   

8.            cancelBubble(e);   

9.         }) ;   

10.   

11.         $('.select>p').on("clic", fonction ( e) {   

12.             $('.select').toggleClass('open');   

13.             cancelBubble(e);   

14.         });   

15.   

16.         $(document).on('click', function () {   

17.             $('.select').removeClass('open');   

18.         })   

19.     })   

20.   

21.     fonction annulerBulle(événement) {   

22.         si ( event.stopPropagation) {   

23.             event.preventDefault();   

24.             event.stopPropagation();   

25.         } else {   

26.            

    event.returnValue = false;   

27.             event.cancelBubble();   

28.         }   

29.     }   

30. script>  

1、首先为 p 标签绑定 cliquez sur 事件，在触发的时候，为 sélectionnez 添加或移除 classe ouverte,也就是将 ul 显示出来。

2、为 li 绑定 click 事件，当选中了一个 li 元素的时候，首先获取到 data-value，然后将其赋值给 p 标签，然后为选中的 li添加 selected class,与此同时利用 siblings() 方法，让兄弟节点的 selected class 移除。

3、为 document 设置click 事件，当我们点击网页中任何一处地方的时候，如果 ul Document 内, 所以我们需要阻止事件冒泡，调用自己写的 CancelBubble() 方法。

总结好了，本文的内容到这就基本介绍了，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!