JavaScript to achieve drop-down menu effect

JavaScript to achieve drop-down menu effect

Use Javascript to implement a drop-down menu for your reference. The specific contents are as follows

I am still learning the big front end. Please forgive me if there are any irregularities or incorrect ideas in the code. Thank you for your advice.

Drop-down menus or side menus are very practical in actual development

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 padding: 0;
 margin: 0;
 border: 0;
 }
 .menu{
 width: 100%;
 height: 50px;
 border: 1px solid lightyellow;
 box-shadow: 0 2px 5px black;
 }
 .menu div{
 /*margin-top: 10px;*/
 float: left;
 width: 19.82%;
 height: 50px;
 /* border: 1px solid red;*/
 text-align: center;
 }
 button{
 margin-top: 15px;
 cursor: pointer;
 width: 25px;
 height: 15px;
 background-color: pink;
 }
 .show1{
 display: none;
 width: 19.82%;
 height: 250px;
 /*border: 1px solid black;*/

 }
 .show1 div{
 border: 1px solid pink;
 width: 247px;
 height: 48px;
 text-align: center;
 }
 a{
 text-decoration: none;
 display: block;
 margin-top: 10px;
 }
 a:hover{
 color: #ff242d;
 font-size: 25px;
 }
 </style>
</head>
<body>
 <div class="menu">
 <div> drop down 1
 <button>^</button>
 </div>
 <div> drop-down 2
 <button>^</button>
 </div>
 <div> drop down 3
 <button>^</button>
 </div>
 <div> drop down 4
 <button>^</button>
 </div>
 <div> drop down 5
 <button>^</button>
 </div>
 </div>

 <div class="show1">
 <div><a href="#" >4654tyyut</a></div>
 <div><a href="#" >4654</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >tert</a></div>
 </div>
 <script>
 var btn = document.querySelector('button')
 var show1 = document.querySelector('.show1')
 var flag=0
 btn.onclick = function () {
 if (flag === 0) {
 show1.style.display = 'block'
 flag=1
 }else {
 show1.style.display='none'
 flag=0
 }
 }
 </script>
</body>
</html>

Code Explanation

Here we mainly use the onclick of the script to implement it. The button I use here can also be replaced with other things, and the methods are similar.

After clicking the corresponding thing onclick, an event will be triggered, the function will be called, and then the value of the flag will be judged to perform corresponding operations, hiding/displaying the div.

The flag here is the key. This variable keeps changing between 0.1 when a click event occurs. The function is executed once when the click occurs, that is, the loop is executed once, that is, the value of the flag is judged, so as to achieve the effect of displaying/hiding.

Demonstration effect

When not pulled down

After pulling down

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JavaScript drop-down menu implementation code
  • css+js drop-down menu
  • JS implementation code for the three-level drop-down menu
  • js dynamically sets the default selected item in the select drop-down menu
  • A js implementation code for a date drop-down menu
  • JS real multi-level linkage drop-down menu class, easily realize the linkage menu of provinces, cities and districts!
  • Js click pop-up drop-down menu effect example
  • JavaScript to show and hide the drop-down menu
  • Three ways to implement the secondary drop-down menu in the navigation menu in JS
  • js to achieve the effect code of cascading drop-down menu of provinces and cities across the country

<<:  Using Docker run options to override settings in the Dockerfile

>>:  Mysql GTID Mha configuration method

Recommend

How to use vw+rem for mobile layout

Are you still using rem flexible layout? Does it ...

Summary of several important performance index calculation and optimization methods for MySQL

1 QPS calculation (number of queries per second) ...

Analysis and solution of the cause of web page style loss caused by browser automatic form filling

From the backend to the front end, what a tragedy....

How to run multiple MySQL instances in Windows

Preface In Windows, you can start multiple MySQL ...

MySQL should never write update statements like this

Table of contents Preface cause Phenomenon why? A...

Detailed explanation of routing configuration in Linux system with multiple network cards

Routing configuration commands under Linux 1. Add...

What is the file mysql-bin.000001 in mysql? Can it be deleted?

After installing MySQL using ports, I found that ...

CSS3 uses scale() and rotate() to achieve zooming and rotation

1. scale() method Zoom refers to "reducing&q...

Linux Autofs automatic mount service installation and deployment tutorial

Table of contents 1. Introduction to autofs servi...

HTML table markup tutorial (1): Creating a table

<br />This is a series of tutorials provided...

CSS and CSS3 flexible box model to achieve element width (height) adaptation

1. CSS realizes fixed width on the left and adapt...

A brief discussion on how to elegantly delete large tables in MySQL

Table of contents 1. Truncate operation 1.1 What ...

How to implement responsive layout with CSS

Implementing responsive layout with CSS Responsiv...

Can't connect to local MySQL through socket '/tmp/mysql.sock' solution

Error message: ERROR 2002: Can't connect to l...

CSS HACK for IE6/IE7/IE8/IE9/FF (summary)

Since I installed the official version of IE8.0, ...