TransWikia.com

Masonry style menu columns in mega-menu

Stack Overflow Asked by Joe RR on December 7, 2021

I’m trying to organize the columns of a megamenu so that they look like a mansory layout, so, it’s not necessarily a mansory, it’s just a menu with the bottom columns closest to the top columns, the reason for this is that currently the columns bottom are aligned with each other leaving a large space between the top when there are few links.
i tried the approach shown here: https://w3bits.com/css-masonry/
but this has his downsides and break the columns into 6/6 when it has less than 8 columns, the menu must have 4 columns then break it to the next line.

the html structure is a <u> with <li> inside with links.

every <li> is a column, the <ul> is the container

this is a design only of how this must be

here’s is what the html structure looks like: https://jsfiddle.net/leandrorr/1wmdbsn7/11/

i already tried column-count: 4; in css and child items with: display: inline-block; width: 100%;

csshtmlmasonry

2 Answers

Not perfect, but is responsive and easy to manage. Does not use Flexbox or Grid displays.

Uses CSS column-count to vary # of UL columns displayed. Could be adjust to other than 5,3 and 1 columns. Gaps between titles can be adjusted with a blank <li> in list.

I added some pseudo-items to create a bigger display for demo only.

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: https://stackoverflow.com/questions/62901723/masonry-style-menu-columns-in-mega-menu -->
<style>
 .menu-list {
   list-style: none;
   margin: 0;
   padding: 0;
   margin: 0 auto;
 }
 .menu-list ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 .menu-list li { padding: 0 20px; }
 .menu-list .sub-list li:nth-child(1) {
   font-weight: bold;
   padding-bottom: 10px;
 }
 .menu-list .sub-list a {
   font-family: arial;
   font-size: 1rem;
   text-decoration: none;
   color: #333;
   transition: color .2s ease;
 }
 .menu-list .sub-list a:hover { color: #8d8d8d; }
</style>

<style>
/* Modified from: https://www.w3schools.com/css/css3_multiple_columns.asp */
 .columnList {
    -webkit-column-count: 5; /* Chrome, Safari, Opera */
    -moz-column-count: 5; /* Firefox */
    column-count: 5;
 }
 @media (max-width: 60em) {
   .columnList { 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
 }
 @media (max-width: 30em) {
   .columnList {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
 }
</style>

</head><body>

<ul class="menu-list columnList">
  <li class="menu-list-item">
    <ul class="sub-list">
      <li><a href="#">Man</a></li>
      <li><a href="#">T-shirts</a></li>
      <li><a href="#">Jackets</a></li>
      <li><a href="#">Skateboarding</a></li>
    </ul>
  </li>
  <li>&nbsp;</li>

  <li class="menu-list-item">
    <ul class="sub-list">
      <li><a href="#">Women</a></li>
      <li><a href="#">T-shirts</a></li>
      <li><a href="#">Dress</a></li>
      <li><a href="#">Shoes</a></li>
    </ul>
  </li>
  <li>&nbsp;</li>

  <li class="menu-list-item">
    <ul class="sub-list">
      <li><a href="#">Boys</a></li>
      <li><a href="#">T-shirts</a></li>
      <li><a href="#">Jackets</a></li>
      <li><a href="#">Skateboarding</a></li>
    </ul>
  </li>
  <li>&nbsp;</li>

  <li class="menu-list-item">
    <ul class="sub-list">
      <li><a href="#">Girls</a></li>
      <li><a href="#">T-shirts</a></li>
      <li><a href="#">Dress</a></li>
      <li><a href="#">Shoes</a></li>
    </ul>
  </li>
  <li>&nbsp;</li>

  <li class="menu-list-item">
    <ul class="sub-list">
      <li><a href="#">Teens</a></li>
      <li><a href="#">T-shirts</a></li>
      <li><a href="#">Dress</a></li>
      <li><a href="#">Shoes</a></li>
      <li><a href="#">Caps</a></li>
      <li><a href="#">Jackets</a></li>
      <li><a href="#">Tendencies</a></li>
      <li><a href="#">Acessories</a></li>
    </ul>
  </li>
  <li>&nbsp;</li>

  <li class="menu-list-item">
    <ul class="sub-list">
      <li><a href="#">Children</a></li>
      <li><a href="#">T-shirts</a></li>
      <li><a href="#">Dress</a></li>
      <li><a href="#">Shoes</a></li>
      <li><a href="#">Caps</a></li>
      <li><a href="#">Jackets</a></li>
      <li><a href="#">Tendencies</a></li>
      <li><a href="#">Acessories</a></li>
    </ul>
  </li>
</ul>

</body>
</html>

Answered by jmrker on December 7, 2021

Using masonry isn't really a good option here. Because each list must be started and finished in one column (each list has a first element which is kind of the title of it).

Another option is that You have 4 columns then you can stack 2 lists in one column (You have to find a good combination to make it look ordered)

Sample:

.list-container {
  display: flex;
  
}

.col {
  flex: 1;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 16px;
}
ul li {
  
}
ul li:first-of-type {
  font-weight: bold;
  padding-bottom: 10px;
}
<div class="list-container">
  <div class="col">
    <ul>
      <li>Group 1</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>   
    </ul>
    <ul>
      <li>Group 2</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
  <div class="col">
    <ul>
      <li>Group 3</li>
      <li>Item</li>
      <li>Item</li> 
    </ul>
    <ul>
      <li>Group 4</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>  
    </ul>  
  </div>
  <div class="col">
    <ul>
      <li>Group 5</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>  
    </ul>
    <ul>
      <li>Group 6</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>  
  
  </div>
  <div class="col"></div>
</div>

And if you are looking for a way to group them automatically so that they have almost the same height you either have to that manually or use javascript or server code to handle that (which still requires good combinations to be available)

Answered by thepowerlies on December 7, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP