Showing a multi-column layout for an HTML ul list

Question

Showing a multi-column layout for an HTML ul list

I have an automatic nested list structure that looks like this

<ul>
  <li>AAA</li>
  <li>BBB
    <ul>
      <li>111
        <ul>
          <li>XXX</li>
        </ul>
      </li>
      <li>222</li>
    </ul>
  </li>
  <li>CCC</li>
  ...etc...
</ul>

I am looking to arrange the content in columns as shown below:

AAA    111    XXX
BBB    222
CCC

By using JQuery and some CSS techniques, I can easily create a navigation menu. For example, selecting BBB from the first column will display its children in the second column while hiding any other second-level ULs.

My challenge lies in styling the list to achieve the desired column layout for different depths. Adding tags to each UL or LI to indicate depth is one option. However, when attempting to use relative positioning to shift each column left, vertical gaps are created where entries were moved. Absolute positioning solves this issue but may not be the most elegant solution. Any suggestions for a better approach?

javascript jquery html css

Answer 1

Answer №1

By utilizing recursive functions, this task becomes relatively straightforward: http://example.com/recursive-function-example.

For a more interactive approach, consider storing the parent-child relationships of elements and displaying the relevant ones upon user interaction.

var $row = $("#row");

function extractText(node) { // retrieves text content excluding children
    return node.clone()
            .children()
            .remove()
            .end()
            .text();
}

function processElement(element, level) {
    element.children().each(function() { // iterate through children
        var $child = $(this);
        var targetCell = $row.find("td").eq(level); // locate cell to append this level to
        var appendedContent = extractText($child) + "<br>"; // content to append
        if(targetCell.length) { // check if cell exists
            targetCell.append(appendedContent);
        } else { // create new cell if it doesn't exist
            $row.append($("<td>").append(appendedContent));
        }
        var children = $child.children();
        if(children.length) { // recursively call for children, if any
            processElement(children, level + 1);
        }
    });
}

processElement($("ul:eq(0)"), 0); // initiate the process

Further reading: http://example.com/jquery-text-without-children

Answer 2

By utilizing recursive functions, this task becomes relatively straightforward: http://example.com/recursive-function-example.

For a more interactive approach, consider storing the parent-child relationships of elements and displaying the relevant ones upon user interaction.

var $row = $("#row");

function extractText(node) { // retrieves text content excluding children
    return node.clone()
            .children()
            .remove()
            .end()
            .text();
}

function processElement(element, level) {
    element.children().each(function() { // iterate through children
        var $child = $(this);
        var targetCell = $row.find("td").eq(level); // locate cell to append this level to
        var appendedContent = extractText($child) + "<br>"; // content to append
        if(targetCell.length) { // check if cell exists
            targetCell.append(appendedContent);
        } else { // create new cell if it doesn't exist
            $row.append($("<td>").append(appendedContent));
        }
        var children = $child.children();
        if(children.length) { // recursively call for children, if any
            processElement(children, level + 1);
        }
    });
}

processElement($("ul:eq(0)"), 0); // initiate the process

Further reading: http://example.com/jquery-text-without-children

Showing a multi-column layout for an HTML ul list

Answer №1

Similar questions

"Capturing the essence of your online presence: The

In the thymeleaf fragment, the th:field attribute is marked with a crimson underline

Ways to enhance the appearance of the parent element when the radio button is clicked

Utilizing NextJS to retrieve cookie data within React components

What could be causing the redirection to my php file in this particular contact form?

Express server failing to deliver static assets

Execute JavaScript code a specified number of repetitions, incrementing the value of each number in the array by 1

Adding objects from an existing JSON file to an empty object in Node.js is a straightforward process

challenges encountered with the clearTimeout() method in vue.js

Generating webpack bundle from files located in a specific directory

Incorporate image into Vue.js form along with other information

The error message "Access-Control-Allow-Origin" header is not present when making an Ajax call to ReactJS localhost

What is the process for generating a variable script within an HTML tag using document.write?

Utilize jQuery AJAX to showcase JSON data by handling the response of a POST request sent to a JSP

Stop Bootstrap IE menu from closing when scrollbar is clicked

Adding information to a MySQL database using a variable - What's the best way?

What is the best way to input information into an object?

with every instance of an ajax request sent to a separate file

Enlarge image when clicked

Tips for resolving the ECONNRESET error during the installation of Electron?