首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >mega-menu中的砖石样式菜单列

mega-menu中的砖石样式菜单列
EN

Stack Overflow用户
提问于 2020-07-15 02:29:03
回答 2查看 674关注 0票数 2

我正在尝试组织megamenu的列,使它们看起来像mansory布局,所以,它不一定是mansory,它只是一个菜单,底部的列最接近顶部的列,原因是目前底部的列彼此对齐,在顶部之间留下了很大的空间,而链接很少。我尝试了这里所示的方法:https://w3bits.com/css-masonry/,但这有它的缺点,当它的列少于8列时,将列分解为6/6,菜单必须有4列,然后将其分到下一行。

html结构是一个内部带有链接的<li><u>

每个<li>都是一个列,<ul>就是容器

下面是html结构的样子:https://jsfiddle.net/leandrorr/1wmdbsn7/11/

我已经用display: inline-block; width: 100%;在css和子项中尝试了column-count: 4;

EN

回答 2

Stack Overflow用户

发布于 2020-07-17 16:09:58

在这里使用masonry并不是一个好的选择。因为每个列表必须在一列中开始和结束(每个列表都有一个类似于其标题的第一个元素)。

另一种选择是你有4列,那么你可以在一列中堆叠2个列表(你必须找到一个好的组合才能让它看起来有序)

示例:

代码语言:javascript
运行
复制
.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;
}
代码语言:javascript
运行
复制
<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>

如果您正在寻找一种自动将它们分组的方法,以便它们具有几乎相同的高度,则必须手动或使用javascript或服务器代码来处理(这仍然需要良好的组合才可用)。

票数 3
EN

Stack Overflow用户

发布于 2020-07-17 23:42:05

不完美,但响应迅速且易于管理。不使用Flexbox或Grid显示。

使用CSS column-count改变显示的UL列数。可以调整为不同于5、3和1列。标题之间的间距可以通过列表中的空白进行调整。

我添加了一些伪项来创建一个更大的显示,仅用于演示。

代码语言:javascript
运行
复制
<!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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62901723

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档