CSS drop-down box effects _HTML5 China

Trying to make such an effect is tricky, but the code is not difficult to understand. First, take a look at the Html code.

<p class= "Container" >    <p class= "heading" >        
We can see that instead of using the native SELECT element, we use other elements to simulate the effect. We specified the data-value for the LI element, mainly next we will use JQuery to get the selected value and place it under the P element.

Here's a look at CSS code.

   * {        margin:0;        padding:0;    }    HTML {        font-family: ' Terminal ';        font-size:62.5%;    }    Body {        background-color: #33CC66;    }

 

 
  
 
   
Sets the margin and padding of all elements in a Web page to 0.
 
   
Set the default font in the Web page to Terminal and the font size to 62.5%, which is 10px.
 
   
Sets the background color to #33CC66.
 
  

 
<link href= ' http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis ' rel= ' stylesheet ' type= ' text/css ' >
We used the Terminal font, and then we used the lobster font, so we added the reference with this line of code.

   . Heading,. Select {        display:block;        Width:22rem;        margin:0 Auto;        Text-align:center;    }    . Heading {        width:28rem;        Margin-top:10rem;        Margin-bottom:2rem;    }    . Heading H2 {        font-size:6rem;        font-family: ' Lobster ';        Color: #ffffff;    }

 

 
  
 
   
Specifies the headng, select width, and specifies its horizontal center.
 
   
Modify the width of the heading, mainly to make it wider than the width of the Select, looks more beautiful. Then specify its top margin and bottom margin.
 
   
Sets the font and font size and color of H2 elements under heading.
 
  

 
.select > P,. Select ul {background-color: #ffffff;        Font-size:2rem;        BORDER:1PX Solid bisque;        border-radius:5px;    margin-bottom:0;        }.select > P {text-align:left;        Padding:1rem;        position:relative;        border-bottom-right-radius:0;        border-bottom-left-radius:0;        Cursor:pointer;    Color:rgba (102, 102, 102,. 6);        }.select > P:after {display:block;        width:10px;        height:10px;        Content: ";        Position:absolute;        Top:1.4rem;        Right:2rem;        border-bottom:1px solid #33CC66;        border-left:1px solid #33CC66;        Transform:rotate ( -45DEG);    Transition:transform. 3s ease-out, top 2s ease-out; }

 

 
  
 
   
Sets the background color and border settings for P and UL elements.
 
   
Specify the style for the P element individually, and set its Position property, primarily for drawing the drop-down button to the right below.
 
   
Using: After the Draw drop-down button on the right side of the P element, we can see that we are using the left bottom box and then rotating-45 degrees to simulate this effect. It is worth noting that we need to set its display to block, and set the width high, otherwise we will not see this effect.
 
  

 
. Select ul {        margin-top:0;        border-top-left-radius:0;        border-top-right-radius:0;        List-style-type:none;        Cursor:pointer;        Overflow-y: auto;        max-height:0;        Transition:max-height. 3s ease-out;    }    . Select ul li {        padding-left:0.5rem;        Display:block;        Line-height:3rem;        Text-align:left;    }

 

 
  
 
   
Set some default properties of UL and set it to a maximum width of 0, specifying OVERFLOW-Y as Auto, this time UL will be hidden.
 
   
When I set up here, I encountered a problem, that is, the Li tag is always a line of dissatisfaction with UL, because it defaults to the margin and padding, so at the beginning of the page all the elements of the margin and the inner margin set to 0.
 
  

 
    . select.open ul {        max-height:20rem;        transform-origin:50% 0;        -webkit-animation:slide-down. 5s ease-in;    }    . Select.open > P:after {        position:absolute;        Top:1.6rem;        Transform:rotate ( -225deg);        Transition:transform. 3s ease-in, top 2s ease-in;    }

 

 
  
 
   
Sets the maximum height for open and assigns it an animated effect.
 
   
Rotate the drop-down button by 225 degrees and assign it an animation.
 
  

 
Let's look at the Slide-down animation effect specified for the UL element, which is the key to this drop-down effect.

   @-webkit-keyframes Slide-down {        0% {            transform:scale (1, 0);        }        25% {            Transform:scale (1, 1.25);        }        50% {            Transform:scale (1, 0.75);        }        75% {            Transform:scale (1, 1.1);        }        100% {            Transform:scale (1, 1);        }    }
See the above code may be understood, is to constantly change the size of the UL, so that it can be scaled between 0.75-1.25, so there will be the effect of the beating.

Here are some simple CSS code that is no longer explained.

   . Select ul li:hover {        Background-color:rgba (102, 153, 102, 0.4);    }    . Select. Selected {        Background-color:rgba (102, 153, 102, 0.8);    }
Now that the CSS is done, here's how we can use JQuery to control the effect.

We don't need to download JQuery to use it, because there are already many websites that offer CDN services, such as the Bootcdn I'm using.

<script src= "Http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" ></script>
You can use JQuery below.

<script> $ (document). Ready (function () {$ ('. Select Ul li '). On ("C            Lick ", function (e) {var _this = $ (this);            $ ('. Select >p '). Text (_this.attr (' Data-value '));            $ (_this). addclass (' selected '). Siblings (). Removeclass (' selected ');            $ ('. Select '). Toggleclass (' open ');        Cancelbubble (e);        });            $ ('. Select>p '). On ("click", Function (e) {$ ('. Select '). Toggleclass (' open ');        Cancelbubble (e);        });        $ (document). On (' click ', Function () {$ ('. Select '). Removeclass (' open ');            })}) function cancelbubble (event) {if (event.stoppropagation) {event.preventdefault ();        Event.stoppropagation ();            } else {event.returnvalue = false;        Event.cancelbubble (); }}</script> 

 

 
  
 
   
 
  
 
 
   
 
  Bind the Click event to Li, and when an LI element is selected, first get to Dat A-value, then assigns it to the P tag and then adds selected class to the selected Li, while using the siblings () method to remove the selected class from the sibling node.