Do you have such experience, just began to learn front-end knowledge, as a beginner, JS learning is not fine, only to master HTML5 and CSS3, but also yearn for some very forced things, to show the students.

I’m just funny, because programmers who don’t want to pretend are not good programmers. (laughs)σ ‘∀´)σ

So here is a simple can not be more simple, only with H5 and C3 to achieve the accordion menu, to meet the vanity of the students.

Let me show you the effect

Sigma (‘ L_ ‘), well, I can’t help it. I want the code to be simple and the effect to be cool.

However, it can be satisfied only with the students who are also beginners

Ok, without further ado, how to introduce the implementation

code

First, the HTML section

<div class="container">   
 <div class="list"> <p> Home </p> <div class="menu"></div> 
  </div>    
  <div class="list"> <p> personal </p> <div class="menu"></div>
  </div>    
  <div class="list"> <p> Promote </p> <div class="menu"></div>  
  </div>  
  <div class="list"> <p> column </p> <div class="menu"></div> 
  </div>
</div>Copy the code

This is very simple, is to construct the structure of the site, of course, the real site using accordion menu is very detailed, interlocking, here is just to introduce how to achieve, want to enrich the site, please go down to try

The CSS part

 .container {         
   width: 150px;       
   height: 500px;          
   margin: 100px auto;     
  }  
    
  p {          
     height: 35px;       
     line-height: 35px;    
     padding-left: 30px;       
     font-size: 14px;         
     color: #fff;         
     background-color: rgb(109, 175, 241);     
     transition: all 1s;       
  }   
 
  .menu {          
     height: 0;       
     background-color: rgb(164, 188, 209);          
     transition: all 1s;      
  }     
  
  .list:hover p {       
    background-color: purple;    
    }    
  
  .list:hover .menu {      
      height: 100px;     
   }Copy the code

Since this implementation only relies on HTML5 and CSS3, CSS is the focus

CSS is used for layout and beautification of web pages

First set the width and height for the entire container, so I center it for illustration

Next, in order to show the time to see more clearly, to each label added color, color is my random match, the actual web design, should pay attention to the beauty between the color match.

Focus on

The accordion menu is mainly implemented through a combination of hover selector and transition properties, which are described in detail below

Hover pseudo-class selector

A pseudo class is not a real class, or there is no class = “XXX” in the page, so it is called a pseudo class.

Action: Selects the element over which the mouse pointer floats.

In this article, after the mouse is placed on the menu, the menu changes color is to use the hover pseudo-class selector, after the mouse is placed on a label, display another label after the hover, of course, you can also directly write attributes in the hover selector.

CSS 3 trantion properties

The transition function of the CSS allows CSS property values to transition smoothly over a period of time. This effect can be triggered with a mouse click, a focus, a click, or any change to the element, and smoothly animates the CSS property values.”

transition: all 1s; Means to complete all attributes by 1s.

I originally set the height of the div tag to 0px and the height to 100px in.list: hover. menu, so when I place the mouse pointer over the ment element, the width gradually changes from 0px to 100px, which gives the effect of an accordion menu.


Afterword.

In fact, the accordion menu with h5 and C3 only works poorly, so if you want to become a web master, you need to work harder to acquire knowledge, but that’s just scratching the surface.

Finally, I wish you all good health, thank you (‘ ω · ´)