mega-menu中的砖石样式菜单列
mega-menu中的砖石样式菜单列
提问于 2020-07-15 02:29:03
我正在尝试组织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;
Stack Overflow用户
发布于 2020-07-17 23:42:05
不完美，但响应迅速且易于管理。不使用Flexbox或Grid显示。
使用CSS column-count改变显示的UL列数。可以调整为不同于5、3和1列。标题之间的间距可以通过列表中的空白进行调整。
我添加了一些伪项来创建一个更大的显示，仅用于演示。
<!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> </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> </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> </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> </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> </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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62901723
复制相关文章
相似问题
腾讯云开发者
