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

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

1. Time difference functions (TIMESTAMPDIFF, DATE...

How to change the terminal to a beautiful command line prompt in Ubuntu 18

I reinstalled VMware and Ubuntu, but the command ...

CSS achieves the effect of rotating the outermost layer of a multi-layer nested structure while keeping other layers unchanged

There is such a scenario: a circular container, t...

The complete process of iptables rules in Docker being lost after iptables restart

Causes and consequences 1. When using the ansible...

Detailed explanation of mysql scheduled tasks (event events)

1. Brief introduction of the event An event is a ...

Introduction to RHCE bridging, password-free login and port number modification

Table of contents 1. Configure bridging and captu...

An article to help you understand the basics of VUE

Table of contents What is VUE Core plugins in Vue...

Detailed explanation of how to connect to MySQL database using Java in IntelliJ IDEA

1. Download MySQL database and install and config...

Solve the problem of docker container exiting immediately after starting

Recently I was looking at how Docker allows conta...

Let's talk about what JavaScript's URL object is

Table of contents Overview Hash Properties Host p...

5 tips for writing CSS to make your style more standardized

1. Arrange CSS in alphabetical order Not in alphab...

jQuery realizes the scrolling effect of table row data

This article example shares the specific code of ...

Analysis of the principles of several ways to imitate the magnifying glass effect in CSS3

Why is the title of the article “Imitation Magnif...

Detailed example of MySQL exchange partition

Detailed example of MySQL exchange partition Pref...

Two ways to open and close the mysql service

Method 1: Use cmd command First, open our DOS win...