JavaScript to show and hide the drop-down menu

JavaScript to show and hide the drop-down menu

This article shares the specific code for JavaScript to display and hide the drop-down menu for your reference. The specific content is as follows

Sometimes this page effect is needed:

When the mouse moves over an element, a drop-down menu is implemented. When the mouse moves away from the element, the drop-down menu disappears.

Implementation ideas

1. A box contains two parts, the lower part is the submenu, which is set to be hidden first: display: none;
2. When the mouse moves to the box: trigger event - - -onmouseover, js sets the display value of the submenu below to - - -block, making the submenu appear
3. Move the mouse away from the box: trigger the event - - -onmouseout, js sets the display value of the submenu below to - - -none, making the submenu hidden again
4. Change the font color, background color and other styles according to your needs

Code Sample

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Operation element-Sina drop-down menu</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        ul li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #4c4c4c;
        }
        
        a:hover {
            color: #e88415;
        }
        
        .box {
            width: 80px;
            margin: 50px auto;
            font-size: 14px;
            color: #4c4c4c;
        }
        
        .weibo {
            position: relative;
            background-color: #fcfcfc;
        }
        
        .weibo a {
            display: block;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
        }
        
        .change {
            color: #f9a74f;
            background-color: #edeef0;
        }
        
        i {
            position: absolute;
            top: 50%;
            right: 15px;
            margin-top: -4px;
            width: 5px;
            height: 5px;
            border-bottom: 1px solid orangered;
            border-right: 1px solid orangered;
            transform: rotate(45deg);
        }
        
        .weiboList {
            display: none;
        }
        
        .weiboList li a {
            display: block;
            width: 80px;
            height: 33px;
            line-height: 33px;
            padding-left: 15px;
            border-bottom: 1px solid #fecc5b;
            background-color: #fff;
        }
        
        .weiboList li a:hover {
            background-color: #fff5da;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="weibo"><a href="#" >Weibo<i class="select"></i></a></div>
        <ul class="weiboList">
            <li><a href="#" >Private Message</a></li>
            <li><a href="#" >Comments</a></li>
            <li><a href="#" >@Me</a></li>
        </ul>
    </div>

    <script>
        var box = document.querySelector('.box');
        var weibo = document.querySelector('.weibo');
        var weiboList = document.querySelector('.weiboList');

        box.onmouseover = function() {
            weibo.className = 'weibo change'
            weiboList.style.display = 'block';

        }

        box.onmouseout = function() {
            weibo.className = 'weibo';
            weiboList.style.display = 'none';
        }
    </script>
</body>

</html>

Page effect:

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 show and hide the drop-down menu
  • Vue.js Example code for showing and hiding the left secondary menu
  • A simple example of showing or hiding the effect of js menu click

<<:  VMware virtual machine installation Apple Mac OS super detailed tutorial

>>:  A simple ID generation strategy: Implementation of generating globally unique ID from MySQL table

Recommend

Sample code using the element calendar component in Vue

First look at the effect diagram: The complete co...

CentOS7 firewall and port related commands introduction

Table of contents 1. Check the current status of ...

Vue implements a simple magnifying glass effect

This article example shares the specific code of ...

An article to master MySQL index query optimization skills

Preface This article summarizes some common MySQL...

Implementation of drawing audio waveform with wavesurfer.js

1. View the renderings Select forward: Select bac...

MySQL data loss troubleshooting case

Table of contents Preface On-site investigation C...

Pricing table implemented with CSS3

Result: Implementation Code html <div id="...

jQuery Ajax chatbot implementation case study

Chatbots can save a lot of manual work and can be...

Analysis and solution of the problem that MySQL instance cannot be started

Table of contents Preface Scenario Analysis Summa...

Responsive Web Design Learning (1) - Determining the screen size and percentage usage

Nowadays, mobile devices are becoming more and mo...

IE8 browser will be fully compatible with Web page standards

<br />According to foreign media reports, in...

CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom

Preview address: https://ovsexia.gitee.io/leftfix...

6 solutions to IDEA's inability to connect to the MySQL database

This article mainly introduces 6 solutions to the...

How to set the default value of a MySQL field

Table of contents Preface: 1. Default value relat...

HTML table tag tutorial (25): vertical alignment attribute VALIGN

In the vertical direction, you can set the row al...