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

JavaScript to show and hide the drop-down menu

Implementation ideas

Code Sample

About Nginx gzip configuration

How to solve the problem that scroll-view of WeChat applet cannot slide left and right

Use image to submit the form instead of using button to submit the form

Understanding and using React useEffect

Analyze the difference between ES5 and ES6 apply

WeChat applet implements fixed header and list table components

MySQL performance optimization tips

How to compile and install opencv under ubuntu

How to create a MySQL database and support Chinese characters

JS implements simple addition and subtraction of shopping cart effects

Recommend

$nextTick explanation that you can understand at a glance

Vue mobile terminal realizes the whole process of left sliding editing and deletion

Solution to the problem of the entire page not being centered when using margin:0 auto in HTML

A solution to a bug in IE6 with jquery-multiselect

Solve the problem that Docker cannot ping the host machine under Mac

JavaScript to achieve JD.com flash sale effect

Detailed tutorial on deploying Django project using Docker on centos8

Solve the problem of no my.cnf file in /etc when installing mysql on Linux

Detailed explanation of soft links and hard links in Linux

Two ways to export csv in win10 mysql

Three methods to modify the hostname of Centos7

Mysql database advanced usage of views, transactions, indexes, self-connections, user management example analysis

Some lesser-known sorting methods in MySQL

Vue3.x uses mitt.js for component communication

JavaScript imitates Xiaomi carousel effect