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