Cree una tabla de contenido en la arquitectura de vista de árbol usando HTML, CSS y JavaScript

Posted on by Rudeus Greyrat

Los elementos de la vista de árbol son una especie de menú desplegable, aunque estén bien organizados. Este tipo de vista le da a su sitio web una apariencia organizada, para crear una arquitectura de vista de árbol de un menú desplegable, podemos usar HTML, CSS y JavaScript. Dividiremos todo el procedimiento en dos secciones Creación de estructura y Diseño de estructura. A continuación se desarrollan ambos apartados.

Creación de estructura: en esta sección, crearemos una estructura básica de una tabla de contenido en la arquitectura de vista de árbol de elementos.

  • Código HTML:

    <!DOCTYPE html>
    <html>
       
    <head>
        <title>
            Create a Table of Content in Tree
            View Architecture using HTML, CSS
            and JavaScript
        </title>
    </head>
       
    <body>
        <h1>GeeksforGeeks</h1>
        <b>A Computer Science Portal for Geeks</b>
        <br>
          
        <ul id="tuitorial">
            <li><span class="gfg">Tutorials</span>
                <ol class="cover" type="i">
                    <li><span class="gfg">Algorithms</span>
                        <ol class="cover" type="a">
                            <li>
                            <span class="gfg">
                                Analysis of Algorithms
                            </span>
                              
                            <ol class="cover">
                                <li>Asymptotic Analysis</li>
                                <li>Worst, Average and Best Cases</li>
                                <li>Asymptotic Notations</li>
                                <li>Little o and little omega notations</li>
                                <li>Lower and Upper Bound Theory</li>
                                <li>Analysis of Loops</li>
                                <li>Solving Recurrences</li>
                                <li>Amortized Analysis</li>
                                <li>What does ‘Space Complexity’ mean?</li>
                                <li>Pseudo-polynomial Algorithms</li>
                                <li>Polynomial Time Approximation Scheme</li>
                                <li>A Time Complexity Question</li>
                            </ol>
                            </li>
                            <li>Searching Algorithms</li>
                            <li>Sorting Algorithms</li>
                            <li>Graph Algorithms</li>
                            <li>Pattern Searching</li>
                            <li>Geometric Algorithms</li>
                            <li>Mathematical</li>
                            <li>Randomized Algorithms</li>
                            <li>Greedy Algorithms</li>
                            <li>Dynamic Programming</li>
                            <li>Divide and Conquer</li>
                            <li>Backtracking</li>
                            <li>Branch and Bound</li>
                            <li>All Algorithms</li>
                        </ol>
                    </li>
                    <li>
                        <spna class="gfg">
                            Data Structures
                        </span>
                        <ol class="cover" type="a">
                            <li>Arrays</li>
                            <li>Linked List</li>
                            <li>Stack</li>
                            <li>Queue</li>
                            <li>Binary Tree</li>
                            <li>Binary Search Tree</li>
                            <li>Heap</li>
                            <li>Hashing</li>
                            <li>Graph</li>
                            <li>Advanced Data Structure</li>
                            <li>Matrix</li>
                            <li>Strings</li>
                            <li>All Data Structures</li>
                        </ol>
                    </li>
                    <li>
                        <spna class="gfg">Languages</span>
                        <ol class="cover" type="a">
                            <li>C</li>
                            <li>C++</li>
                            <li>Java</li>
                            <li>Python</li>
                            <li>C#</li>
                            <li>Javascript</li>
                            <li>JQuery</li>
                            <li>SQL</li>
                            <li>PHP</li>
                            <li>Scala</li>
                            <li>Perl</li>
                            <li>Go Language</li>
                            <li>HTML</li>
                            <li>CSS</li>
                            <li>Kotlin</li>
                        </ol>
                    </li>
                    <li>
                        <span class="gfg">Interview Corner</span>
                        <ol class="cover" type="a">
                            <li>Company Preparation</li>
                            <li>Top Topics</li>
                            <li>Practice Company Questions</li>
                            <li>Interview Experiences</li>
                            <li>Experienced Interviews</li>
                            <li>Internship Interviews</li>
                            <li>Competitive Programming</li>
                            <li>Design Patterns</li>
                            <li>Multiple Choice Quizzes</li>
                        </ol>
                        <li>
                            <spna class="gfg">GATE</span>
                        </li>
                        <li>
                            <spna class="gfg">ISRO CS</span>
                        </li>
                        <li>
                            <spna class="gfg">UGC NET CS</span>
                        </li>
                        <li>
                            <spna class="gfg">CS Subjects</span>
                        </li>
                        <li>
                            < class="gfg">Web Technologies</span>
                        </li>
                    </li>    
                </ol>
            </li>
        </ul>
    </body>
       
    </html>

Estructura de diseño: en la sección anterior, hemos creado la estructura de los elementos básicos de la vista de árbol. En esta sección, diseñaremos la estructura para la vista de árbol.

  • Código CSS:

    <style>
        h1 {
            color: green;
        }
           
        .gfg {
            cursor: pointer;
        }
           
        .gfg::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 8px;
        }
           
        .cover {
            display: none;
        }
           
        .active {
            display: block;
        }
           
        ol [type=a] {
            background-color: yellow;
            color: purple;
        }
    </style>
  • Código JavaScript:

    <script>
        var toggler = document.getElementsByClassName("gfg");
        var i;
       
        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click",
                function() {
                    this.parentElement.querySelector(".cover")
                        .classList.toggle("active");
                    this.classList.toggle("gfg-down");
                }
            );
        }
    </script>

Combine el código HTML, CSS y JavaScript: este es el código final después de combinar las secciones anteriores. Mostrará la tabla de contenido en la arquitectura de vista de árbol.

<!DOCTYPE html>
<html>
   
<head>
    <title>
        Create a Table of Content in Tree
        View Architecture using HTML, CSS
        and JavaScript
    </title>
      
    <style>
        h1 {
            color: green;
        }
           
        .gfg {
            cursor: pointer;
        }
           
        .gfg::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 8px;
        }
           
        .cover {
            display: none;
        }
           
        .active {
            display: block;
        }
           
        ol [type=a] {
            background-color: yellow;
            color: purple;
        }
    </style>
</head>
   
<body>
    <h1>GeeksforGeeks</h1>
    <b>A Computer Science Portal for Geeks</b>
    <br>
    <ul id="tuitorial">
        <li><span class="gfg">Tutorials</span>
            <ol class="cover" type="i">
                <li><span class="gfg">Algorithms</span>
                    <ol class="cover" type="a">
                        <li>
                            <span class="gfg">Analysis of Algorithms</span>
                            <ol class="cover">
                                <li>Asymptotic Analysis</li>
                                <li>Worst, Average and Best Cases</li>
                                <li>Asymptotic Notations</li>
                                <li>Little o and little omega notations</li>
                                <li>Lower and Upper Bound Theory</li>
                                <li>Analysis of Loops</li>
                                <li>Solving Recurrences</li>
                                <li>Amortized Analysis</li>
                                <li>What does ‘Space Complexity’ mean?</li>
                                <li>Pseudo-polynomial Algorithms</li>
                                <li>Polynomial Time Approximation Scheme</li>
                                <li>A Time Complexity Question</li>
                            </ol>
                        </li>
                        <li>Searching Algorithms</li>
                        <li>Sorting Algorithms</li>
                        <li>Graph Algorithms</li>
                        <li>Pattern Searching</li>
                        <li>Geometric Algorithms</li>
                        <li>Mathematical</li>
                        <li>Randomized Algorithms</li>
                        <li>Greedy Algorithms</li>
                        <li>Dynamic Programming</li>
                        <li>Divide and Conquer</li>
                        <li>Backtracking</li>
                        <li>Branch and Bound</li>
                        <li>All Algorithms</li>
                    </ol>
                </li>
                <li>
                    <spna class="gfg">Data Structures</span>
                    <ol class="cover" type="a">
                        <li>Arrays</li>
                        <li>Linked List</li>
                        <li>Stack</li>
                        <li>Queue</li>
                        <li>Binary Tree</li>
                        <li>Binary Search Tree</li>
                        <li>Heap</li>
                        <li>Hashing</li>
                        <li>Graph</li>
                        <li>Advanced Data Structure</li>
                        <li>Matrix</li>
                        <li>Strings</li>
                        <li>All Data Structures</li>
                    </ol>
                </li>
                <li>
                    <spna class="gfg">Languages</span>
                    <ol class="cover" type="a">
                        <li>C</li>
                        <li>C++</li>
                        <li>Java</li>
                        <li>Python</li>
                        <li>C#</li>
                        <li>Javascript</li>
                        <li>JQuery</li>
                        <li>SQL</li>
                        <li>PHP</li>
                        <li>Scala</li>
                        <li>Perl</li>
                        <li>Go Language</li>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>Kotlin</li>
                    </ol>
                </li>
                <li>
                    <span class="gfg">Interview Corner</span>
                    <ol class="cover" type="a">
                        <li>Company Preparation</li>
                        <li>Top Topics</li>
                        <li>Practice Company Questions</li>
                        <li>Interview Experiences</li>
                        <li>Experienced Interviews</li>
                        <li>Internship Interviews</li>
                        <li>Competitive Programming</li>
                        <li>Design Patterns</li>
                        <li>Multiple Choice Quizzes</li>
                    </ol>
                    <li><spna class="gfg">GATE</span></li>
                    <li><spna class="gfg">ISRO CS</span></li>
                    <li><spna class="gfg">UGC NET CS</span></li>
                    <li><spna class="gfg">CS Subjects</span></li>
                    <li><spna class="gfg">Web Technologies</span></li>
                </li>
            </ol>
        </li>
    </ul>
   
    <script>
        var toggler = document.getElementsByClassName("gfg");
        var i;
   
        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click",
                function() {
                    this.parentElement.querySelector(".cover")
                        .classList.toggle("active");
                    this.classList.toggle("gfg-down");
                }
            );
        }
    </script>
</body>
   
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *