Creating a Secondary Menu Using JavaScript

This article example shares the specific code of JavaScript to achieve the secondary menu effect for your reference. The specific content is as follows

The effect diagram of this implementation is as follows:

The effect of this secondary menu is:

When you click on a box, the contents of the opened box will be retracted and the contents of the box currently clicked will be expanded.

So how do we achieve this effect?

We can step by step

1. First, we need to display the entire frame , that is, the appearance of all boxes expanded, because its display/non-display is done with overflow:hidden .
But be careful not to use the same type of box for all the boxes, because that is inconvenient to write js code. After all, our next operation is to click the green box => to collapse or expand the white box, so we need to put each day + corresponding course box under a div parent box. Then initialize it: set the height equal to the height of span, set overflow:hidden , as shown below, you can combine the following code

2. Then start writing the js part: make sure that when a box is clicked, it will change from closed to expanded. Our box is span. If we want to display all the contents of span's parent div, we first need to get all spans through document.getElementsByTagName("span") , and then use a for loop to get the corresponding parent box through parentNode in the onclick response function of each span, so that the height of its parent box becomes the value of its scrollHeight

3. Then we need to collapse the expanded box when clicking span to expand a box. At this time, we need a variable now to record the box that was clicked last time . Set its initial value to null. If now is not equal to the currently clicked span, get the parent box of now, set its height to the height of the span, and then expand the currently clicked span (the second point has already explained how to expand); if now is equal to the currently clicked span, get the height of its parent box. If it is equal to the height of the span, set its height to the value of scrollHeight , otherwise set it to the height of the span.

4. Set a timer and call it when you are ready to increase or decrease the height of the parent box. When the height of the parent box reaches the height of the span or reaches scrollHeight , turn off the timer (you can set two timers)

The code is as follows:

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 300px;
            height: 700px;
            margin: 100px auto;
        }

        .container div {
            height: 43px;
            overflow: hidden;
        }

        .container div span {
            width: 150px;
            height: 40px;
            line-height: 40px;
            border-radius: 15px;
            display: block;
            text-align: center;
            background-color: rgba(104, 250, 201, 0.849);
            cursor: pointer;
        }

        a {
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-decoration: none;
            display: block;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="">
            <span id="one">Monday</span>
            Visualization
            Visualization
        </div>
        <div id="">
            Tuesday
            <a href="">Algorithm Design</a>
            <a href="">Graphics</a>
            <a href="">Design Group Course Design</a>
            Operating System
        </div>
        <div id="">
            <span id="three">Thursday</span>
            <a href="">Situation and Policy</a>
            Operating System
        </div>
        <div id="">
            <span id="four">Friday</span>
            <a href="">Algorithm Design</a>
        </div>
    </div>

    <script>
        let menu = document.getElementsByTagName("span");
        let now = null;
        for (let i = 0; i < menu.length; i++) {
            menu[i].onclick = function () {
                let par = menu[i].parentNode;
                if (now === i) {
                    if (par.style.height === "43px") {
                        open(par);
                    }
                    else {
                        close(par);
                    }
                }
                else {
                    if (now !== null) {
                        close(menu[now].parentNode);
                    }
                    open(par);
                    now = i;
                }
            }
        }

        function open(par) {
            let time = setInterval(() => {
                let num = par.offsetHeight;
                if (num >= par.scrollHeight) {
                    clearInterval(tem);
                }
                par.style.height = num + 1 + "px";
            }, 7);
        }

        function close(par) {
            let time = setInterval(() => {
                let num = par.offsetHeight;
                if (num <= 43) {
                    clearInterval(tem);
                    return;
                }
                par.style.height = num - 1 + "px";
            }, 7);
        }

    </script>
</body>

</html>

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:

Universal secondary menu code (css+javascript)
Simply implement js click to expand the secondary menu function
Vue.js Example code for showing and hiding the left secondary menu
Display secondary menu js effects when the mouse passes over
js realizes the effect of sliding the secondary menu to the right horizontally
JavaScript mouse over to display the secondary menu special effects
Vue.js realizes the secondary menu effect
JS implements ultra-simplified response to the mouse to display the secondary menu code
js realizes the effect of displaying the current content by clicking on the secondary menu
An example of a collapsible secondary menu implemented with JavaScript+CSS

<<: CSS: visited pseudo-class selector secret memories

>>: Steps to build a Docker image using Dockerfile

Creating a Secondary Menu Using JavaScript

js implements table drag options

Detailed explanation of the problem of mixed use of limit and sum functions in MySQL

Detailed steps to install a virtual machine and use CentOS 8 using VMware 15

A graphic tutorial on how to install redhat 8.0 system (a must-have for beginners)

How to use VirtualBox to build a local virtual machine environment on Mac

(MariaDB) Comprehensive explanation of MySQL data types and storage mechanisms

MySQL 8.0.17 installation and configuration graphic tutorial

Summary of the use of vue Watch and Computed

Install Zookeeper under Docker (standalone and cluster)

Detailed explanation of Vue data proxy

Recommend

Perfectly install Mac OS10.14 under Win10 VM virtual machine (graphic tutorial)

Native js imitates mobile phone pull-down refresh

How to use tcpdump to capture packets in Linux system

Summary of methods for inserting videos into HTML pages

Practice of realizing Echarts chart width and height adaptation in Vue

Example of adding attributes using style in html

Implementation of element shuttle frame performance optimization

Solve the conflict between docker and vmware

MySQL encryption and decryption examples

How to block IP and IP range in Nginx

How to use react-color to implement the front-end color picker

Use and analysis of Mysql Explain command

Analysis of the process of deploying pure HTML files in Tomcat and WebLogic

Analysis of MySQL duplicate index and redundant index examples

VUE+Canvas implements the sample code of the desktop pinball brick-breaking game