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

Vue code highlighting plug-in comprehensive comparison and evaluation

Table of contents Comprehensive comparison From t...

Detailed process of installing and deploying onlyoffice in docker

0. System requirements CPU I5-10400F or above Mem...

How to solve the problem of not getting form value after submitting html form input using disabled

After the form input box input is set to the disa...

js uses Canvas to merge multiple pictures into one implementation code

Solution function mergeImgs(list) { const imgDom ...

FlashFXP ftp client software registration cracking method

The download address of FlashFXP is: https://www....

How to debug loader plugin in webpack project

Recently, when I was learning how to use webpack,...

Commonly used js function methods in the front end

Table of contents 1. Email 2. Mobile phone number...

Implementation example of video player based on Vue

When the existing video player cannot meet the ne...

Zookeeper request timeout problem in dubbo: configuration of mybatis+spring connecting to mysql8.0.15

I am going to review Java these two days, so I wr...

How to create a flame effect using CSS

The main text starts below. 123WORDPRESS.COM Down...

3 common errors in reading MySQL Binlog logs

1. mysqlbinlog: [ERROR] unknown variable 'def...

A tutorial on how to install, use, and automatically compile TypeScript

1. Introduction to TypeScript The previous articl...

Use docker to deploy tomcat and connect to skywalking

Table of contents 1. Overview 2. Use docker to de...

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

I'm currently working on my own small program...

HTML Tutorial: title attribute and alt attribute

XHTML is the basis of CSS layout. jb51.net has al...