Converting nested lists into Miller Columns: a step-by-step guide

Question

Converting nested lists into Miller Columns: a step-by-step guide

I am interested in creating a series of interactive nested lists using Miller Columns design. The idea is that when you click on a parent item, it expands to reveal the next level of the list.

While I have come across solutions that involve parsing data as JSON, I am looking for a way to achieve this effect using plain HTML without needing to convert the data format.

The structure of my content is based on a standard nested list format:

<ul>
<li><a href="">Column 1</a></li>
<li><a href="">Column 1</a></li>
<li><a href="">Column 1</a></li>
<li><a href="">Column 1</a>
    <ul>
    <li><a href="">Column 2</a>
        <ul>
        <li><a href="">Column 3</a>
        <ul>
        <li><a href="">Column 4</a></li>
        <li><a href="">Column 4</a></li>
        <li><a href="">Column 4</a></li>
        <li><a href="">Column 4</a>

        </li>
        </ul>
        </li>
        <li><a href="">Column 3</a></li>
        <li><a href="">Column 3</a></li>
        <li><a href="">Column 3</a>

        </li>
        </ul>
    </li>
    <li><a href="">Column 2</a></li>
    <li><a href="">Column 2</a></li>
    <li><a href="">Column 2</a></li>
    </ul>
</li>
</ul>

I would appreciate any guidance on how to accomplish this task without relying on JSON parsing methods. Thank you.

jquery html css

Answer 1

Answer №1

Using Miller Columns to Display Columns

Check out the Fiddle here.

You can achieve this effect with some simple CSS solutions. If you prefer CSS over SASS, there are online converters available or I can provide the CSS code for you.

ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block; }
ul > li > ul {
  position: absolute;
  top: 0;
  left: 100%;
  padding-left: 10px; }

This approach uses the current column as a reference point for aligning subsequent columns to the right of their parent.

UPDATE

I have removed unnecessary properties like white-space and text-overflow from the solution.

Creating Interactive Miller Columns

UPDATED: PART TWO

Here's the updated fiddle with interactions.

In addition to CSS styling, I have included a jQuery script to handle column interactions. Some visual enhancements have been added for better illustration.

Additional CSS styles:

ul > li {
 background-color: #075883; }

ul > li a {
  color: white;
  padding: 5px;
  display: block;
  text-decoration: none; }

ul > li.expanded > ul {
  overflow: visible;
  max-width: 500px;
  transition: 0.2s; }

Here's the jQuery code (which can also be implemented in pure JavaScript):

$('li a').on('click', function() {
  $(this).parent().toggleClass('expanded').siblings().removeClass('expanded'); 
});

Answer 2

Using Miller Columns to Display Columns

Check out the Fiddle here.

You can achieve this effect with some simple CSS solutions. If you prefer CSS over SASS, there are online converters available or I can provide the CSS code for you.

ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block; }
ul > li > ul {
  position: absolute;
  top: 0;
  left: 100%;
  padding-left: 10px; }

This approach uses the current column as a reference point for aligning subsequent columns to the right of their parent.

UPDATE

I have removed unnecessary properties like white-space and text-overflow from the solution.

Creating Interactive Miller Columns

UPDATED: PART TWO

Here's the updated fiddle with interactions.

In addition to CSS styling, I have included a jQuery script to handle column interactions. Some visual enhancements have been added for better illustration.

Additional CSS styles:

ul > li {
 background-color: #075883; }

ul > li a {
  color: white;
  padding: 5px;
  display: block;
  text-decoration: none; }

ul > li.expanded > ul {
  overflow: visible;
  max-width: 500px;
  transition: 0.2s; }

Here's the jQuery code (which can also be implemented in pure JavaScript):

$('li a').on('click', function() {
  $(this).parent().toggleClass('expanded').siblings().removeClass('expanded'); 
});

Converting nested lists into Miller Columns: a step-by-step guide

Answer №1

Using Miller Columns to Display Columns

Creating Interactive Miller Columns

Similar questions

FlexNav excluding

Using a custom attribute in jQuery allows conditional statements to be executed using the

Showing the value of a JavaScript variable within an HTML input field

Navigate through the Div and Unordered List with ease by scrolling

I am having trouble styling a pre-existing class in bootstrap using my custom CSS file

Tips on automating the process of moving overflowing elements into a dropdown menu

Error in Flask app: Stripe Elements - "400 bad request: CSRF token not found or invalid"

Interactions with Ajax through the use of socket.io communications

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

Color schemes for items in the Windows store app

Choose an image to be displayed at either full width or full height, depending on which dimension is reached first

Creating a minigame using JQuery (Javascript)

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Stylish CSS menu that adjusts to different screen sizes, featuring a centrally aligned h1

An engaging CSS3 animation that alternates between popping in and out, resetting after each item has been displayed

Creating a div that is subtly askew

Designing a uniquely shaped button

Tips for incorporating jQuery UI into Angular 6

What is the best way to toggle the readonly attribute on an input within an ng-repeat row when a button is clicked?

Use JavaScript to convert only the initial letter to uppercase