logo标签列表

HTML CSS 汉堡菜单 动态列

htmlcss
4
我已经为MegaMenu编写了一个Knockout绑定，其中包含汉堡组件。
汉堡包含一堆类别和这些类别中的项目。
类别作为标题加粗显示。然后在其下方缩进显示它们的项目。
类别和项目只是从数据库检索的字符串。
汉堡的规则如下：
不要跨列拆分类别。
在滚动之前先使用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中进行混乱的循环等操作。

3
我已经阅读了这个问题，但是除了你想用优雅的CSS替换当前的“混乱循环”，我不明白你的最终目标是什么。你需要在问题中添加当前的“混乱循环”。你应该在问题中添加代码片段，可以使用Stack Overflow代码插入器并引用Knockout和其他库。请注意保持翻译的准确性和原意不变。 - Brian Ogden
您的悬赏描述指出您正在寻找从可信和/或官方来源获取答案的回答。由于标准仅描述可能性而不是不可能性，因此您不会找到这些来源。 - Niels Keurentjes
你能添加一些 JavaScript 还是只能用 CSS？ - Vixed
可以使用JavaScript。 - David
4个回答
4

我能否使用纯CSS根据我的规则调整汉堡包列的位置？

不行，CSS无法执行所需的等分算术。在这种情况下，您需要在HTML中进行预格式化。

4
你最好使用列布局，并加上“break-inside: avoid”。
来源：https://css-tricks.com/almanac/properties/b/break-inside/ 幸运的是，你可以通过 break-inside 告诉浏览器保持特定元素在一起。
 -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
           page-break-inside: avoid; /* Firefox */
                break-inside: avoid; /* IE 10+ */

我在这里制作了一个示例 http://codepen.io/HerrSerker/pen/obgddJ

.outer {
  -moz-columns: 3;
  -webkit-columns: 3;
  columns: 3;
  display: block;
}
.outer > li {
  display: block;
  padding-top: 30px;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.outer > li > span {
  text-decoration: underline;
}
.inner {
  width: 200px;
  display: block;
  text-decoration: none;
}
.inner > li {
  display: block;
  padding-left: 10px;
  padding-top: 3px;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
  max-height: 400px;
  overflow-y: auto;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
<div class="wrapper"><ul class="outer">
  <li><span>Lorem ipsum dolor.</span>
    <ul class="inner">
      <li>Fuga, ratione blanditiis commodi.</li>
      <li>Obcaecati dicta ut, pariatur!</li>
      <li>Earum, illum sapiente enim.</li>
    </ul>
  </li>
  <li><span>Vel, ratione cum!</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Accusamus, odio ipsum nemo!</li>
      <li>Molestiae unde natus odio.</li>
      <li>Lorem ipsum dolor sit.</li>
      <li>Corporis, tempora nisi minus.</li>
    </ul>
  </li>
  <li><span>Aliquid, tenetur, similique.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Repellendus repellat placeat odit!</li>
    </ul>
  </li>
  <li><span>Quibusdam, necessitatibus aliquid.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>At nisi, quas veritatis!</li>
      <li>Perferendis laudantium nesciunt dolor!</li>
      <li>Distinctio quidem veniam impedit!</li>
    </ul>
  </li>
  <li><span>Sed, quam, beatae.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Voluptates temporibus provident dolores.</li>
      <li>Explicabo non minus ullam!</li>
      <li>Tenetur, molestias, debitis. Voluptatum.</li>
      <li>Quibusdam incidunt unde, laboriosam!</li>
      <li>Fugiat perferendis eligendi, dignissimos.</li>
    </ul>
  </li>
  <li><span>Lorem ipsum.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Perspiciatis, a dolore officia!</li>
    </ul>
  </li>
  <li><span>Voluptatum, ipsum?</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Odit, aliquam voluptates alias!</li>
    </ul>
  </li>
  <li><span>Dolorem, quos!</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Quae quos quas, fugit?</li>
    </ul>
  </li>
  <li><span>Cum, excepturi.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Libero distinctio, necessitatibus laborum!</li>
    </ul>
  </li>
  <li><span>Blanditiis, harum.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Corporis fuga accusamus, ab?</li>
    </ul>
  </li>
</ul>
</div>

这个兼容吗？请看这里：http://caniuse.com/#feat=css-grid

至于排序：你不能用CSS来做，必须使用HTML或JS。

3
您可以将值display:table设置给父级div，然后将display:table-cell设置给子项。这不会破坏您的列。
2

我认为可以使用CSS column来实现您所需的效果：

ul{
    ...
    column-gap: 2em;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

演示: http://jsfiddle.net/pg2xy9h2/3/

我不明白如何在列数动态的情况下实现尽可能均匀地分配列宽。"尽可能均匀"是一个除法计算，如果除数未知，如何进行除法运算呢？

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接