Using pure CSS to do a drop-down menu function of the sample code

Time:2020-11-23

Introduction:
When looking at the interview questions these days, I can often see a drop-down menu implemented with CSSI found that a lot of people failed to do it, and they could only do it with JS。 To be honest, I’m shocked. This function is very simple to implement, and even an introductory topic. How can so many people not? So today, let’s have an interview with dry goods. I’ll take you to make a drop-down menu with CSS.

It’s still the same. I don’t say much. I’ll go to the renderings directly.

1. A button, before clicking (mobile phone side) or when the mouse is not pointing (PC side)

在这里插入图片描述

2. Click it or point to it.

手机点击后
鼠标指向后

It can display the drop-down menu, and its implementation principle is very simple, just remember one point: hover, this property.

Let’s go straight to the code and explain it later

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        li{
            list-style: none;
            height: 28px;
        }
        #menu{
            display: inline-block;
        }
        #menu #list {
            max-height: 0;
            transition: max-height 0.25s ease-out;
            overflow: hidden;
            background: #f5f4f4;
            width: 80px;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #menu:hover #list {
            max-height: 200px;
            transition: max-height 0.25s ease-in;
            width: 80px;
            margin: 0;
            padding: 0;
        }
        .button{
	          height: 32px;
	          width: 80px;
	          margin-top: 6px;
	          border-radius: 4px;
	          color: #fff;
	          padding-left: 0;
	          padding-right: 0;
	          line-height: 32px;
	          background: #E33E33;
	          text-align: center;
        }
    </style>
</head>
<body>
  <div id="menu">
    < div class = "button" > more information < / div >
    <ul id="list">
        <li>Personal Center</li>
        <li>My blog</li>
        <li>Settings</li>
        <li>Log out</li>
        <li>Write off</li>
    </ul>
  </div>
</body>
</html>

You just need to set a div, and then set two states for it, one is no: hover, the other is: hover. And when there is no: hover, you can set the menu to hide (overflow: hidden;), and the rest of the code is a simple box model.

Now let’s say: hover, what is this thing,It is a CSS selector that selects the elements on which the mouse pointer floats.So when the mouse hovers or the mobile phone clicks, this property will be triggered and the drop-down menu will be displayed. At the same time, we added the transition attribute to make the drop-down menu have a gradient effect, which makes it more feel when it is dropped down.

So if CSS selector is magic, if it is used well, you don’t need to write a lot of JS code. I will make a column of CSS selectors in the future, and then introduce all CSS selectors in the system.

在这里插入图片描述

summary

This article on the use of pure CSS to do a drop-down menu function of the sample code to introduce this, more relevant CSS drop-down menu content, please search the previous articles of developeppaer or continue to browse the relevant articles below, I hope you will support developeppaer more in the future!