How to use CSS technology to achieve cool special effects in drop-down boxes

This article introduces you to a cool drop-down box implemented using CSS. The effect after implementation is really very good. The detailed implementation process and sample code are given in the article. Interested friends can take a look below. Take a look.

First let’s take a look at the renderings to be achieved

I want to make such a The effect is still cumbersome, but the code is not difficult to understand.

First, let’s take a look at the Html code.

##XML/HTML CodeCopy content to clipboard

1. <p class="container">

2.    

   <p class="heading">

3.     

   <h2>Custom Selecth2> ;

#​
4. p>

5. 
   

#<

6. p class="select">##          <

7. p

   >Please selectp>                                                        

8. ##           <li data-value=

   "HTML5"
9. >

   HTML5li>#             <li data-value="CSS3"

>
10. CSS3

    li >#              <li data-value="JavaScript"

    >

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

12. li>##             <li data -value="Backbone">Backbone

13. li

    >                                                                                                                                ;/p>##

    p
14. >

It can be seen that we do not use the native select element, but use other elements to simulate this effect. We specified data-value for the li element, mainly because we will use JQuery to get the selected value and place it under the p element.

Let’s look at the CSS code step by step.

##CSS CodeCopy content to clipboard

1. * {

2. ##margin

   : 0;

3. padding

   : 0;

}

5. ##html {
font -family
7. :

   'Terminal';

font-size
8. : 62.5%;
   }

10. body {
background-color
12. :

    #33CC66;

    }

13. 1. Change the outer margins and inner margins of all elements in the web page Set to 0.

2. Set the default font in the web page to Terminal and the font size to 62.5%, which is 10px.

3. Set the background color to #33CC66.

XML/HTML Code

Copy content to clipboard

<

1. link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>We used the Terminal font above, and we will also use the Lobster font next, so use this line of code to add a reference.

1. Specify the headng, select width and specify its horizontal centering.

2. Modify the width of heading, mainly to make its width larger than the width of select and look more beautiful. Then specify its top and bottom margins.

3. Set the font, font size, and color of the h2 element under heading.

CSS Code

Copy content to clipboard

.select > p, .select ul {

1. ##                                                                                  ##font-size

   : 2rem;

2. border: 1px

solid
3. bisque;
                                                                                                                                  ;

4. ## }    

   ##.select > p {  

5.                                                                                                                     ##          position

   :
relative
6. ;                                                                                               

   right-radius: 0;

7. ##                                                               

8.                 color: rgba(102, 102, 102, .6);                                                                                          

   #.select > p:after {
display
10. :

    block

    ;

11.        width: 10px

    ; 

12.           height: 10px

    ;   

13.           content: ''

    ;                                                                             ##; ##: 2rem;

14. ##                                                                                                         # transform: rotate(-45deg);

    ## transition: transform .3s ease-out,
top
15. .2s ease-out;

    } }

16. #1. Set the background color and border of the p and ul elements.

    2. Specify a separate style for the p element and set its position attribute, mainly to draw the drop-down button on the right side below.

    3. Use :after to draw the drop-down button on the right side of the p element. It can be seen that we use the lower left border and then rotate -45 degrees to simulate this effect. It is worth noting that we need to set its display to block and set the width and height, otherwise we will not see this effect.

17. CSS Code

    Copy content to clipboard

18. .select ul { margin-top: 0;

19. border-top-left -radius: 0;

    border-top
-
20. right
    right
-radius: 0;

21. list-style-type
:
22. none

    ;

##cursor

:

pointer

;

overflow

-y: auto;

1. #max-height

   : 0;

2. transition: max-height .3s ease-out;

3. }

4. .select ul li { padding -left: 0.5rem;

5. display: block;

6. ##line-height: 3rem;

text-align
7. :

   left;

   }

8. 1. Set some default attributes of ul, set the maximum width to 0, and specify overflow-y as auto. At this time, ul will be hidden.

   2. I encountered a problem when setting here, that is, the li tag always occupies a line that is not full of ul. That is because it has margin and padding by default, so at the beginning, all the pages in the web page are included. The element's margins and padding are set to 0.




CSS CodeCopy content to clipboard

1. .select.open ul { 

2. max-height: 20rem;

3. transform-origin: 50% 0;

4. -webkit-animation: slide-down .5s ease-in;

5. }

7. .select.open > p:after {

8. position: absolute;

9. top: 1.6rem;

10. transform: rotate(-225deg);

11. transition : transform .3s ease-in, top .2s ease-in;

12. }

1, is open Set the maximum height and animate it.

2. Rotate the drop-down button -225 degrees and assign animation to it.

Let’s take a look at the slide-down animation effect specified for the ul element, which is also the key to this drop-down effect.




CSS CodeCopy content to clipboard

1. @-webkit- keyframes slide-down {

2. 0% {

3. transform: scale(1, 0);

4. }

5. ## 25% {

6. transform: scale(1, 1.25);

7. }

8. # 50%{

9. TRANSFORM: Scale (1, 0.75);

# }  
75% {
                                                                                                                                                                 }
100% {
transform: scale(1, 1);
}
}
You may understand after seeing the above code, that is, constantly changing the size of ul so that it is between 0.75-1.25 Scale it, so it will have that jumping effect.

17. There are some simple CSS codes below, which will not be explained again.

CSS Code

Copy content to clipboard


.select ul li :hover {

1. background-color

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

2. }

3. ##.select .selected {
background-color
5. : rgba(102, 153, 102, 0.8);

6. }
   CSS Now that we’ve finished talking, let’s take a look at how we use JQuery control this effect.
7. We do not need to download JQuery to use it, because many websites now provide CDN services, such as the BootCDN I use.

XML/HTML Code
Copy content to clipboard




<script

src
1. =

   "http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" >script>##Now you can use JQuery .

   XML/HTML Code

Copy content to clipboard

1. <script>  

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

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

4.             var _this = $(this);   

5.             $('.select >p').text(_this.attr('data-value'));   

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

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

8.             cancelBubble(e);   

9.         });   

10.   

11.         $('.select>p').on("click", function (e) {   

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

13.             cancelBubble(e);   

14.         });   

15.   

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

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

18.         })   

19.     })   

20.   

21.     function cancelBubble(event) {   

22.         if (event.stopPropagation) {   

23.             event.preventDefault();   

24.             event.stopPropagation();   

25.         } else {   

26.             event.returnValue = false;   

27.             event.cancelBubble();   

28.         }   

29.     }   

30. script>  

1、首先为 p 标签绑定 click 事件，在触发的时候，为 select 添加或移除 open class, 也就是将 ul 显示出来。

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

3、为 document 设置click 事件，当我们点击网页中任何一处地方的时候，如果 ul 是打开的，就将其关闭，不过这个时候由于所有元素都在 document 内，所以我们需要阻止事件冒泡，调用自己写的 cancelBubble() 方法。

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

The above is the detailed content of How to use CSS technology to achieve cool special effects in drop-down boxes. For more information, please follow other related articles on the PHP Chinese website!