Sample code for making a drop-down menu using pure CSS

Sample code for making a drop-down menu using pure CSS

Introduction:
When I looked at interview questions these days, I often saw the use of CSS to implement a drop-down menu, but I found that many people were unable to do it, and finally could only reluctantly do it with JS . To be honest, I am shocked. This function is very simple to implement, and it can even be said to be an entry-level question. Why do so many people not know how to do it? So today I will share some interview tips and show you how to make a drop-down menu using CSS.

It’s still the same. Without further ado, let’s go straight to the renderings.

1. A button, before it is clicked (on a mobile phone) or when the mouse is not pointing (on a PC)

insert image description here

2. After clicking or pointing the mouse.

After clicking on the phone
Mouse pointing back

The drop-down menu can be displayed, and its implementation principle is also very simple. You only need to remember one point: hover, this attribute.

Let's jump right into 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>Log out</li>
    </ul>
  </div>
</body>
</html>

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

Now let’s talk about :hover. What is this thing? It is a CSS selector that is used to select the element on which the mouse pointer floats. So when the mouse is hovered or clicked on the mobile phone, this attribute 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, making it feel more like it is being pulled down.

So isn’t the CSS selector magical? If used well, you don’t have to write a lot of JS code. I will make a column about CSS selectors in the future, and then introduce all CSS selectors in a systematic way.

insert image description here

Summarize

This concludes this article about using pure CSS to create a sample code for a drop-down menu function. For more relevant CSS drop-down menu content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  Semanticization of HTML tags (including H5)

>>:  In-depth understanding of Vue's method of generating QR codes using vue-qr

Recommend

Vue data two-way binding implementation method

Table of contents 1. Introduction 2. Code Impleme...

Use label tag to select the radio button by clicking the text

The <label> tag defines a label (tag) for an...

CSS+HTML to realize the top navigation bar function

Implementation of navigation bar, fixed top navig...

How to use a game controller in CocosCreator

Table of contents 1. Scene layout 2. Add a handle...

How to restore a database and a table from a MySQL full database backup

In the official MySQL dump tool, how can I restor...

Vue-CLI multi-page directory packaging steps record

Page directory structure Note that you need to mo...

How to test network speed with JavaScript

Table of contents Preface Summary of the principl...

Summary of some points to note when registering Tomcat as a service

Here are some points to note when registering Tom...

Solution for coexistence of multiple versions of PHP under Linux system (super simple)

Since PHP7 came out, as a fan of the latest versi...

Steps to introduce PWA into Vue project

Table of contents 1. Install dependencies 2. Conf...

Handwriting implementation of new in JS

Table of contents 1 Introduction to the new opera...

Advantages of INSERT INTO SET in MySQL

Insert data into mysql database. Previously commo...

How to monitor multiple JVM processes in Zabbix

1. Scenario description: Our environment uses mic...

Explanation of the process of docker packaging node project

As a backend programmer, sometimes I have to tink...

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border

Preface A few days ago, I came across the feature...