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

More than 100 lines of code to implement react drag hooks

Preface The source code is only more than 100 lin...

Implementation of communication between Vue and Flask

Install axios and implement communication Here we...

Idea deploys remote Docker and configures the file

1. Modify the Linux server docker configuration f...

Examples and comparison of 3 methods for deduplication of JS object arrays

Table of contents 1. Comparison of data before an...

Introduction to who command examples in Linux

About who Displays users logged into the system. ...

VMware Workstation Pro 16 Graphic Tutorial on Building CentOS8 Virtual Machine Cluster

Table of contents Preparation Install VMware Work...

50 lines of code to implement Webpack component usage statistics

background Recently, a leader wanted us to build ...

Differences between FLOW CHART and UI FLOW

Many concepts in UI design may seem similar in wo...

How to configure Jupyter notebook in Docker container

Jupyter notebook is configured under the docker c...

Introduction to MySQL triggers, creation of triggers and analysis of usage restrictions

This article uses examples to describe the introd...

Centos6.5 glibc upgrade process introduction

Table of contents Scenario Requirements glibc ver...

Summary of HTML Hack Tags in IE Browser

Copy code The code is as follows: <!--[if !IE]...

Detailed explanation of Vue ElementUI manually uploading excel files to the server

Table of contents Overview Property settings Proc...

Sample code for implementing honeycomb/hexagonal atlas with CSS

I don’t know why, but UI likes to design honeycom...

Cross-host communication between docker containers-overlay-based implementation method

Overlay network analysis Built-in cross-host netw...