那些遇到过的问题

具有动态内容的Flexbox响应式超级菜单

Jus*_*tin 8 javascript css css3 flexbox

我正在创建一个大型动态导航菜单,我希望看起来像这样:

[----------- 100% PAGE WIDTH -----------] | GROUP A | GROUP C | GROUP F | GROUP G | | item | item | item | item | | item | | item | item | | | GROUP D | item | item | | GROUP B | item | item | | | item | | | | | item | GROUP E | | | | | item | | | |---------------------------------------| | | | | [------------- END OF PAGE -------------]

请参阅我的JS小提琴示例.

* {
  padding: 0;
  margin: 0;
}
body {
  background: #ccc;
  font-family: helvetica, arial;
  color: #444;
}
ul {
  list-style: none;
}
.mega-menu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 15px;
  height: 50vh;
  background: #fff;
}
.mega-menu > li {
  display: flex;
  flex-direction: column;
  font-size: .7rem;
  padding-bottom: 15px;
}
.title {
  font-size: .7rem;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 5px
}
Run Code Online (Sandbox Code Playgroud) 
<ul class="mega-menu">
  <li>
    <a class="title">News</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>
  </li>

  <li>
    <a class="title">Topics</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>CBS</li>
      <li>NBC</li>
    </ul>
  </li>

  <li>
    <a class="title">Networks</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>
  </li>

  <li>
    <a class="title">Groups</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Sections</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Pilots</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
    </ul>
  </li>

  <li>
    <a class="title">Locations</a>
    <ul>
      <li>Denver</li>
      <li>Baltimore</li>
      <li>LA</li>
      <li>New York</li>
      <li>San Francisco</li>
      <li>New Orleans</li>
      <li>Jacksonville</li>
      <li>Calvery</li>
      <li>August</li>
    </ul>
  </li>

  <li>
    <a class="title">Cities</a>
    <ul>
      <li>Denver</li>
      <li>Baltimore</li>
      <li>LA</li>
      <li>New York</li>
      <li>San Francisco</li>
      <li>New Orleans</li>
      <li>Jacksonville</li>
      <li>Calvery</li>
      <li>August</li>
    </ul>
  </li>

  <li>
    <a class="title">News</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>
  </li>

  <li>
    <a class="title">Topics</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>CBS</li>
      <li>NBC</li>
    </ul>
  </li>

  <li>
    <a class="title">Networks</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>
  </li>

  <li>
    <a class="title">Groups</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Sections</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Pilots</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
    </ul>
  </li>

  <li>
    <a class="title">Locations</a>
    <ul>
      <li>Denver</li>
      <li>Baltimore</li>
      <li>LA</li>
      <li>New York</li>
      <li>San Francisco</li>
      <li>New Orleans</li>
      <li>Jacksonville</li>
      <li>Calvery</li>
      <li>August</li>
    </ul>
  </li>

  <li>
    <a class="title">Cities</a>
    <ul>
      <li>Denver</li>
      <li>Baltimore</li>
      <li>LA</li>
      <li>New York</li>
      <li>San Francisco</li>
      <li>New Orleans</li>
      <li>Jacksonville</li>
      <li>Calvery</li>
      <li>August</li>
    </ul>
  </li>

  <li>
    <a class="title">News</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>
  </li>

  <li>
    <a class="title">Topics</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>CBS</li>
      <li>NBC</li>
    </ul>
  </li>

  <li>
    <a class="title">Networks</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>
  </li>

  <li>
    <a class="title">Groups</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Sections</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Pilots</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
    </ul>
  </li>

  <li>
    <a class="title">Locations</a>
    <ul>
      <li>Denver</li>
      <li>Baltimore</li>
      <li>LA</li>
      <li>New York</li>
      <li>San Francisco</li>
      <li>New Orleans</li>
      <li>Jacksonville</li>
      <li>Calvery</li>
      <li>August</li>
    </ul>
  </li>

  <li>
    <a class="title">Cities</a>
    <ul>
      <li>Denver</li>
      <li>Baltimore</li>
      <li>LA</li>
      <li>New York</li>
      <li>San Francisco</li>
      <li>New Orleans</li>
      <li>Jacksonville</li>
      <li>Calvery</li>
      <li>August</li>
    </ul>
  </li>

  <li>
    <a class="title">News</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>
  </li>

  <li>
    <a class="title">Topics</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>CBS</li>
      <li>NBC</li>
    </ul>
  </li>

  <li>
    <a class="title">Networks</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>
  </li>

  <li>
    <a class="title">Groups</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>
  </li>

</ul>
Run Code Online (Sandbox Code Playgroud)

要求

  1. 如果页面的宽度增长,我希望有更多的列,如果它缩小我想要更少的列.

  2. 如果我要添加两倍的项目,我希望列的高度变得更高,以便有额外项目的空间.

  3. 每组之间的填充/空白应该是相同的.

  4. 理想情况下,我不会使用JavaScript(但如果这是唯一的方法).

问题

当我缩小屏幕高度/宽度时,内容溢出菜单的右侧.

思考

我已经搜索了一个CSS解决方案,但找不到在不均匀组之间不添加间距的解决方案.(例如不均匀的空白)

我能想到的是使用JavaScript来动态设置flexbox父级的高度(增加高度,直到最后一个项目组(TITLE F)完全显示,而不是溢出屏幕.

Our*_*rus 6

也许像这样(jsfiddle):

.mega-menu {
  -webkit-column-count:1;
  -moz-column-count:1;
  column-count:1;
  padding: 15px 15px 0;
  background: #fff;
}
@media (min-width: 200px) {.mega-menu{-webkit-column-count:2;-moz-column-count:2;column-count:2;}}
@media (min-width: 300px) {.mega-menu{-webkit-column-count:3;-moz-column-count:3;column-count:3;}}
@media (min-width: 400px) {.mega-menu{-webkit-column-count:4;-moz-column-count:4;column-count:4;}}
// ...
@media (min-width: 1800px) {.mega-menu{-webkit-column-count:18;-moz-column-count:18;column-count:18;}}
@media (min-width: 1900px) {.mega-menu{-webkit-column-count:19;-moz-column-count:19;column-count:19;}}
@media (min-width: 2000px) {.mega-menu{-webkit-column-count:20;-moz-column-count:20;column-count:20;}}
.mega-menu > li {
  display:inline-block;
  font-size: .7rem;
  padding-bottom: 15px;
}
Run Code Online (Sandbox Code Playgroud)

它可能需要至少扩展到4K显示器的宽度.如果你有SASS或类似的东西,这将使事情变得不那么繁琐.

它不提供内容感知列宽,让您猜测可能的最小列宽.

当你有很多项目要展示但没有滚动时,你提到的关于右边菜单的问题并没有真正解决任何解决方案.考虑到较窄的显示宽度通常也具有较短的显示高度.屏幕越小,您就越不能适应.可能需要安排较小的屏幕以减少菜单选项.

归档时间：

查看次数：

1204 次

最近记录：

9 年，1 月 前
当flexbox项目以列模式换行时,容器不会增加其宽度 143
柔性物品是否可以与其上方的物品紧密对齐？ 56
Flex容器的高度在Safari中无法正常工作 8
Flexbox：当 flex-direction: column, flex-wrap: wrap 时错误的宽度计算 1
更多相关链接
相关归档
什么是console.log以及如何使用它？ 215
角度6依赖注入 59
谷歌地图响应调整大小 57
我应该在body或html元素上设置默认的font-size吗？ 50
Div即使有内容也没有高度 35
容器流体内的BootStrap 3容器 35
使用flexbox每行排列2个项目 31
如何使用Rails中的css和图像创建电子邮件？ 25
IE 11:我自己的代码中的错误CSS3111,并且google.com/fonts不呈现任何字体 19
Flex:当文本太长时间进入新行 6
难疑归档
使用JavaScript获取当前网址？ 2882
如何检查字符串是否包含特定单词？ 2663
我怎么知道通过jQuery选择了哪个单选按钮？ 2583
如何检测元素外部的单击？ 2367
什么是智能指针,什么时候应该使用？ 1730
如何从文件内容创建Java字符串？ 1440
在Android Studio中重命名包 1252
jQuery document.createElement等价？ 1226
如何在同一元素上组合背景图像和CSS3渐变？ 1203
用于Python的IDE是什么？ 1028