Creating a Secondary Menu Using JavaScript

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

Recommend

Example code for implementing a circular trajectory animation using CSS3 and table tags

html: In fact, it is to arrange several solid cir...

Detailed tutorial on installing and configuring MySql5.7 on Ubuntu 20.04

Table of contents 1. Ubuntu source change 2. Inst...

How to use async await elegantly in JS

Table of contents jQuery's $.ajax The beginni...

Deploy Confluence with Docker

1. Environmental requirements 1. Docker 17 and ab...

The complete usage of setup, ref, and reactive in Vue3 combination API

1. Getting started with setUp Briefly introduce t...

Solve the error problem caused by modifying mysql data_dir

Today, I set up a newly purchased Alibaba Cloud E...

MySQL InnoDB transaction lock source code analysis

Table of contents 1. Lock and Latch 2. Repeatable...

A brief discussion on how to learn JS step by step

Table of contents Overview 1. Clearly understand ...

MySql import CSV file or tab-delimited file

Sometimes we need to import some data from anothe...

Vue implements adding watermark effect to the page

Recently, when I was working on a project, I was ...

Detailed use cases of vue3 teleport

Official Website https://cli.vuejs.org/en/guide/ ...

Simple implementation method of two-way data binding in js project

Table of contents Preface Publish-Subscriber Patt...

Teach you how to build hive3.1.2 on Tencent Cloud

Environment Preparation Before starting any opera...

Mycli is a must-have tool for MySQL command line enthusiasts

mycli MyCLI is a command line interface for MySQL...

The most common declaration merge in TS (interface merge)

Table of contents 1. Merge interface 1.1 Non-func...