JavaScript to achieve the effect of clicking on the submenu

JavaScript to achieve the effect of clicking on the submenu

This article shares the specific code of JavaScript to realize the appearance of submenu on click for your reference. The specific content is as follows

First, let's take a look at the effect of clicking on the submenu as shown below:

Click the yellow button and a submenu will appear as shown below:

Let's take a look at the layout first:

<div class="menu">
 <div class="sign" id="sign"></div>
 <div class="lis" id="lis">
 <ul>
 <li><a href="">one</a></li>
 <li><a href="">two</a></li>
 <li><a href="">three</a></li>
 <li><a href="">four</a></li>
 <li><a href="">five</a></li>
 </ul>
 </div>
</div>

The CSS styles are as follows:

ul{
 padding-inline-start: 0px;
 }
 .menu{
 margin: 0 auto;
 background:#0DA795;
 height: 40px;
 width: 600px;
 }
 .sign{
 width: 30px;
 float: right;
 margin-right: 20px;
 margin-top: 8px;
 height: 25px;
 background: rgba(243,193,63,1.00);
 border-radius: 5px;
 position: relative;
 cursor: pointer; //Set the cursor to the shape of a hand}
 .lis{
 position: absolute;
 top:30px;
 display: none;
 }
 .lis ul li{
 list-style: none;
 width: 600px;
 line-height: 40px;
 font-size: 14px;
 text-align: center;
 border-bottom: 1px solid #565656;
 background:#EAEDD5;
 }.lis a{
 text-decoration: none;
 color: black;
 }
 .lis a:hover{
 color: #0da759;
}

Pay special attention to position in CSS styles.
The display in the Lis class is none; because the submenu is hidden at the beginning.

The JavaScript part is as follows:

1. Get their IDs first. After getting their IDs, add a click event to the first ID (sigin) through OnClick;
2. Declare a variable i, assign the second ID to i, and use a branch statement if...else. If i is equal to none, then execute the first statement. If not, execute the second statement.

This achieves the effect we want, see the implementation code:

<script>
 var biaozhi=document.getElementById("sign");
 var li = document.getElementById("lis");
 biaozhi.onclick=function(){
 var i=li.style.display;
 if (i=="none"){
 li.style.display="block";//First statement}else{
 li.style.display="none"; //Second statement}
 }
</script>

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 to achieve the effect of clicking on the self-made menu
  • js drop-down menu clicks next to collapse implementation (pitfall record)
  • js realizes the effect of displaying the current content by clicking on the secondary menu
  • JS implements an example of clicking the drop-down menu to synchronize the selected content to the input box
  • js method to close the menu outside the drop-down menu when clicking
  • Simply implement js click to expand the secondary menu function
  • js implements the sliding menu effect code by clicking the upper left corner of the mouse
  • js implements the drop-down menu effect code that expands when clicking downward
  • CSS+JS method to realize the method of automatically closing the DIV layer menu by clicking the text pop-up
  • A simple example of showing or hiding the effect of js menu click
  • Js click pop-up drop-down menu effect example
  • Click the drop-down menu to implement the js code for the connection jump function

<<:  MySQL inspection script (must read)

>>:  Scary Halloween Linux Commands

Recommend

Using vue3+threejs to imitate the iView official website big wave special effects example

Table of contents Preface 1. Rendering 2. Code 3....

mysql show simple operation example

This article describes the mysql show operation w...

HTML adaptive table method

<body style="scroll:no"> <tabl...

Tutorial on installing Nvidia graphics card driver in Ubuntu 18.04 (with pictures and text)

0. Preliminary preparation Disable secure boot in...

A little-known JS problem: [] == ![] is true, but {} == !{} is false

console.log( [] == ![] ) // true console.log( {} ...

Summary of common functions of PostgreSQL regular expressions

Summary of common functions of PostgreSQL regular...

How to use Antd's Form component in React to implement form functions

1. Construction components 1. A form must contain...

Solve the problem of MySQL Threads_running surge and slow query

Table of contents background Problem Description ...

MySQL 8.0 New Features - Introduction to Check Constraints

Table of contents Preface Check Constraints Creat...

Sublime / vscode quick implementation of generating HTML code

Table of contents Basic HTML structure Generate s...

Detailed explanation of Vue3.0 + TypeScript + Vite first experience

Table of contents Project Creation Project Struct...

js realizes a gradually increasing digital animation

Table of contents background Achieve a similar ef...

Background gradient animation effect made by css3

Achieve results Implementation Code html <h1 c...

Vue ElementUI implements asynchronous loading tree

This article example shares the specific code of ...

Vue.js implements simple folding panel

This article example shares the specific code of ...