我已经为MegaMenu编写了一个Knockout绑定,其中包含汉堡组件。
汉堡包含一堆类别和这些类别中的项目。
类别作为标题加粗显示。然后在其下方缩进显示它们的项目。
类别和项目只是从数据库检索的字符串。
汉堡的规则如下:
不要跨列拆分类别。
在滚动之前先使用3列。即不要仅填充两列并有滚动条(垂直)。
尽可能均匀地分配列。
最多3列。
汉堡有最大高度限制。
类别按字母顺序排序 -
排序示例如下:
假设我有以下类别(忽略其中的项目,因为它是有序的类别):
Dogs、Cars、Cats、Beds、Furniture、Hobbies、Homes、Gyms、Horses
如果将它们分成3列,则呈现如下:
我能按照以下方式构建HTML列表:-
汉堡包含一堆类别和这些类别中的项目。
类别作为标题加粗显示。然后在其下方缩进显示它们的项目。
类别和项目只是从数据库检索的字符串。
汉堡的规则如下:
不要跨列拆分类别。
在滚动之前先使用3列。即不要仅填充两列并有滚动条(垂直)。
尽可能均匀地分配列。
最多3列。
汉堡有最大高度限制。
类别按字母顺序排序 -
排序示例如下:
假设我有以下类别(忽略其中的项目,因为它是有序的类别):
Dogs、Cars、Cats、Beds、Furniture、Hobbies、Homes、Gyms、Horses
如果将它们分成3列,则呈现如下:
Col 1 Col 2 Col 3
----- ----- -----
Beds Dogs Hobbies
Cars Furniture Homes
Cats Gyms Horses
我能按照以下方式构建HTML列表:-
<div>
<ul>
<li>Beds
<ul>
<li>Item 1</li>
<li>Item 2
</ul>
</li>
<li>Cars
<ul>
<li>Item 1</li>
</ul>
</li>
<li>Cats
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Dogs
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
我能否使用纯CSS根据自己的规则调整汉堡包菜单中的列?
这样我就可以避免在HTML中进行混乱的循环等操作。