本文介绍如何使用Flexbox布局模块创建一个内容感知、多列和多级的巨型菜单，无需额外的JavaScript或CSS调整。
vux flexbox使用
如果要构建包含大量项目，图像和列表的大型菜单，则flexbox是适合您的工具。 它将允许您创建一个内容感知，多列和多级的大型菜单，该菜单在悬停时会下降，而无需任何JavaScript或CSS调整。
在本教程中，我将向您展示如何使用flexbox布局模块创建以下下拉菜单：
这不是一个容易的布局，因此我们将使用以下步骤创建它：
- 首先，我们标记并设置主菜单栏的样式。
- 然后，我们为mega菜单创建一个flexbox模板，其中包含您可以在上面的屏幕截图中看到的部分： 假日类型 ， 假日套餐 ， 我们的服务 ， 最后一分钟优惠和热门目的地 。
- 我们将内容（图像，
<ul>列表，图标）插入模板。 - 接下来，我们将每个部分内的项目对齐。
- 我们从CSS中删除了模板的助手样式（背景颜色和边框）。
- 我们添加了悬停规则，当用户将鼠标悬停在“ 假期”菜单上时，该规则将显示超级菜单。
如果要在开始之前测试我们的flexbox大型菜单，请查看以下演示：
为WordPress开发大型菜单？
UberMenu （WordPress超级菜单插件）是CodeCanyon上最畅销的产品之一，如果您正在为WordPress构建大型菜单，那么绝对为您完成了所有繁重的工作。 看一看（显然，然后返回教程！）
1.创建主菜单栏
主菜单栏包含五个项目： 主页 ， 假期 ， 关于 ， 博客和联系人 。 大型下拉菜单将属于Holidays ，而其他菜单项将独立存在。 这是标记主菜单栏HTML（但尚未标记超级菜单）：
<nav>
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Holidays</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav> 在CSS中，我们现在将定义基本样式和颜色。 我们还将.menu元素转换为flex容器，以便菜单项可以排成一行。 通过将center值添加到align-items属性，我们也将每个项目垂直居中在flex容器内：
/* General styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.menu li {
padding: 10px;
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
}
/* Flexbox rules */
.menu {
background-color: darkslateblue;
display: flex;
align-items: center;
text-align: center;
width: 90vw;
margin: 20px 5vw;
height: 60px;
}
.menu-item {
flex: 1;
}在下面，您可以看到主菜单栏现在的外观：
2.为超级菜单创建模板
为了正确显示大型菜单的布局，我们首先创建一个模板，然后在其中填充内容。 由于我们的大型菜单包含多个级别的无序列表，因此从布局主要部分开始要容易得多。 这就是我们HTML更改的方式：
<nav>
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Holidays</a>
<ul class="submenu">
<li class="submenu-item">
<ul class="submenu-top">
<li class="submenu-top-item">Holiday types (links with thumbnail images)</li>
<li class="submenu-top-item">Holiday packages (links with descriptions)</li>
<li class="submenu-top-item">Our services (links with icons)</li>
<li class="submenu-top-item">Last minute offers (links)</li>
</ul><!-- End .submenu-top -->
</li><!-- End .submenu-item-->
<li class="submenu-item">
<ul class="submenu-bottom">
<li class="submenu-bottom-item">Trending destination 1</li>
<li class="submenu-bottom-item">Trending destination 2</li>
<li class="submenu-bottom-item">Trending destination 3</li>
<li class="submenu-bottom-item">Trending destination 4</li>
</ul>
</li><!-- End .submenu-item -->
</ul>
</li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav> 如您所见， .submenu有两个部分： .submenu-top用于四个基于列表的部分）（ 假日类型 ， Holiday套餐 ， 我们的服务 ， 最后一分钟优惠 ）和.submenu-bottom用于基于图像的趋势目的地） 。 它们将是两个单独的flex容器，以便我们可以对每个容器使用不同的flexbox大小和对齐规则。
在下面，您可以看到我们想使用flexbox实现的布局。 我在模板中添加了颜色和边框，以便您可以看到不同的flex项目如何相互关联（模板使用上面HTML）：
第一行是主菜单；第二行是主菜单。 我们已经在步骤1中创建并设置了样式。第二行是.submenu-top ，这是一个flex容器，它使项目根据其内容（内容感知）占用所需的空间。 并且，第三行是.submenu-bottom ，这是一个flex容器，用于在各项之间平均划分空间。
除此之外，我们使用position ， top和left属性相对于.menu定位.submenu 。 由于.menu高.submenu像素，我们将.submenu相对于其位置向下移动.submenu px。 下面CSS还包含上述属于.menu和.menu-item样式，但是增加了position: relative; 到.menu 。
.menu {
display: flex;
align-items: center;
text-align: center;
width: 90vw;
margin: 20px 5vw;
height: 60px;
position: relative;
}
.menu-item {
flex: 1;
}
.submenu {
width: 90vw;
position: absolute;
top: 60px;
left: 0;
text-align: left;
display: flex;
flex-direction: column;
}
.submenu-item {
padding: 15px;
}
.submenu-top {
display: flex;
justify-content: space-around;
}
.submenu-bottom {
display: flex;
}
.submenu-bottom-item {
flex: 1;
} 通过将flex-direction: column规则添加到.submenu我们将两个子菜单（ .submenu-top和.submenu-bottom ）显示为基于列的flex布局。 同时， .submenu-top和.submenu-bottom都是它们自己的子元素的基于行的Flex布局。 我们不添加flex-direction: row; 代码，因为这是flex-direction的默认值，我们只将.submenu-top和.submenu-bottom的display属性设置为flex 。
因为我们要使.submenu-top内容感知，所以我们需要允许flex项根据需要进行拉伸，因此我们在此不定义flex属性（它将使用其默认值）。 但是，我们希望这些项目彼此正确justify-content: space-around; ，因此我们添加了justify-content: space-around; 到.submenu-top 。 这样，正空间将在弹性项目之间平均分配。
.submenu-bottom的布局与主菜单（ .menu ）的布局相同。 因此，我们使用flex: 1; 规则，使它们彼此之间相等地共享flex容器的整个宽度。
在下面的演示中，您可以看到我们的大型菜单的不同部分之间的排列方式：
3.将内容插入模板
在此步骤中，除了将最终内容插入到大型菜单模板中之外，我们什么也不会做。 在.submenu-top ，每个弹性项目都有其自己的无序列表，而.submenu-bottom只是四个趋势目标的一个无序列表：
<nav>
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Holidays</a>
<ul class="submenu">
<li class="submenu-item">
<ul class="submenu-top">
<li class="submenu-top-item thumb-list">
<a href="#" class="submenu-title">Holiday Types</a>
<ul class="submenu-list">
<li>
<img class="submenu-thumbnail" src="https://picsum.photos/id/1067/32/32" alt="City breaks">
<a href="#">City breaks</a>
</li>
<li>
<img class="submenu-thumbnail" src="https://picsum.photos/id/173/32/32" alt="Adventure tours">
<a href="#">Adventure tours</a>
</li>
<li>
<img class="submenu-thumbnail" src="https://picsum.photos/id/1038/32/32" alt="Cruises">
<a href="#">Cruises</a>
</li>
<li>
<img class="submenu-thumbnail" src="https://picsum.photos/id/1015/32/32" alt="Beach holidays">
<a href="#">Beach holidays</a>
</li>
</ul>
</li>
<li class="submenu-top-item desc-list">
<a href="#" class="submenu-title">Holiday packages</a>
<ul class="submenu-list">
<li>
<a href="#">Families</a>
<span class="submenu-desc">Take advantage of our special holiday packages for families.</span>
</li>
<li>
<a href="#">Students</a>
<span class="submenu-desc">Take advantage of our special holiday packages for students.</span>
</li>
<li>
<a href="#">Couples</a>
<span class="submenu-desc">Take advantage of our special holiday packages for couples.</span>
</li>
</ul>
</li>
<li class="submenu-top-item icon-list">
<a href="#" class="submenu-title">Our services</a>
<ul class="submenu-list">
<li>
<i class="fas fa-plane-departure"></i>
<a href="#">Plane tickets</a>
</li>
<li>
<i class="fas fa-car"></i>
<a href="#">Car rental</a>
</li>
<li>
<i class="fas fa-luggage-cart"></i>
<a href="#">Luggage pickup</a>
</li>
<li>
<i class="fas fa-phone-alt"></i>
<a href="#">24/7 customer service</a>
</li>
<li>
<i class="fas fa-dollar-sign"></i>
<a href="#">30-day cancellation policy</a>
</li>
</ul>
</li>
<li class="submenu-top-item">
<a href="#" class="submenu-title">Last minute offers</a>
<ul class="submenu-list">
<li><a href="#">New York</a></li>
<li><a href="#">Stockholm</a></li>
<li><a href="#">Madrid</a></li>
<li><a href="#">Buenos Aires</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</li>
</ul><!-- End .submenu-top -->
</li><!-- End .submenu-item-->
<li class="submenu-item">
<a href="#" class="submenu-title">Trending destinations</a>
<ul class="submenu-bottom">
<li class="submenu-bottom-item">
<figure>
<img src="https://picsum.photos/id/1016/640/260">
<figcaption><a href="#">Mountains</a></figcaption>
</figure>
</li>
<li class="submenu-bottom-item">
<figure>
<img src="https://picsum.photos/id/1040/640/260">
<figcaption><a href="#">Castles</a></figcaption>
</figure>
</li>
<li class="submenu-bottom-item">
<figure>
<img src="https://picsum.photos/id/1039/640/260">
<figcaption><a href="#">Waterfalls</a></figcaption>
</figure>
</li>
<li class="submenu-bottom-item">
<figure>
<img src="https://picsum.photos/id/164/640/260">
<figcaption><a href="#">Historical towns</a></figcaption>
</figure>
</li>
</ul>
</li><!-- End .submenu-item -->
</ul>
</li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>在上面HTML中，我使用了Font Awesome图标，并从Lorem Picsum中提取了图像。 如果查看下面的屏幕截图，您将立即理解为什么我们从创建模板开始：
4.对齐每个部分中的项目
在这一步中，我们将不使用HTML，而仅使用CSS来解决布局中较小的问题。 当我看上图时，我看到的第一件事是.submenu-top中的Holiday Packages部分与其他项目相比过宽。 如果我们有更长的描述，这可能会变得更糟。 因此，向.submenu-top的flex项目添加一个max-width值是合理的，例如：
.submenu-top-item {
max-width: 33.333%;
}通过控制flex项目的宽度，我们的mega菜单看起来更好了：
现在对CSS进行一些微小的调整。 我们将第一列和第二列的每个列表项转换为单独的flex容器。 这意味着Holiday类型部分中有四个微型flex容器， Holiday包中有三个微型flex容器。
我们使用此解决方案通过以下方式强制元素彼此相邻或正下方对齐：
- 在假期类型部分，我们使用
align-items: center;以将文本恰好显示在缩略图的中线， - 在“ 假日套餐”部分中，我们使用
flex-direction: column;在归属定义下显示每个描述（ 家庭 ， 学生 ， 夫妇 ）。
在其他部分中，我们将不会使用flexbox进行内联对齐，因为可以通过基本CSS规则（即margin和width来完成它：
/* Submenu styling */
.submenu .submenu-title {
text-decoration: none;
font-weight: bold;
}
.submenu-list,
.submenu-bottom {
margin-top: 10px;
}
/* Thumbnail list */
.thumb-list .submenu-list > li {
display: flex;
align-items: center;
}
.submenu-thumbnail {
margin-right: 10px;
}
/* Description list */
.desc-list .submenu-list > li {
display: flex;
flex-direction: column;
}
.submenu-desc {
margin-top: 10px;
color: #555;
}
/* Icon list */
.submenu-icon {
width: 32px;
}
/* Submenu bottom */
.submenu-bottom figcaption {
margin-top: 5px;
font-weight: bold;
}这是我们对齐的大型菜单当前的外观：
5.删除模板助手
现在，一切都正常了！ 现在，我们必须删除模板的辅助颜色和边框，并将最终颜色添加到链接和标题部分。 在下面，您可以找到没有悬停规则的最终CSS：
/* General styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
.submenu-icon {
color: #111;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
}
.menu {
background-color: darkslateblue;
}
.submenu {
border: 1px solid #ccc;
}
.menu li {
padding: 10px;
}
.menu-icon {
color: white;
margin-left: 10px;
font-size: 14px;
}
/* Flexbox rules */
.menu {
display: flex;
align-items: center;
text-align: center;
width: 90vw;
margin: 10px 5vw;
height: 60px;
position: relative;
}
.menu-item {
flex: 1;
}
.menu-item > a {
line-height: 40px;
}
.submenu {
width: 90vw;
position: absolute;
top: 60px;
left: 0;
text-align: left;
display: flex;
flex-direction: column;
}
.submenu-item {
padding: 15px;
}
.submenu-top {
display: flex;
justify-content: space-around;
}
.submenu-bottom {
display: flex;
}
.submenu-bottom-item {
flex: 1;
}
/* Submenu general styling */
.submenu-top li {
padding-left: 0;
}
.submenu a {
color: #111;
}
.submenu-top-item {
max-width: 33.333%;
}
.submenu .submenu-title {
font-weight: bold;
color: darkslateblue;
}
.submenu .submenu-title:hover {
text-decoration: none;
}
.submenu-list,
.submenu-bottom {
margin-top: 10px;
}
/* Submenu: Thumbnail list */
.thumb-list .submenu-list > li {
display: flex;
align-items: center;
}
.submenu-thumbnail {
margin-right: 10px;
}
/* Submenu: Description list */
.desc-list .submenu-list > li {
display: flex;
flex-direction: column;
}
.submenu-desc {
margin-top: 10px;
color: #555;
}
/* Submenu: Icon list */
.submenu-icon {
width: 32px;
}
/* Submenu bottom */
.submenu-bottom-title {
padding-left: 10px;
}
.submenu-bottom figcaption {
margin-top: 5px;
font-weight: bold;
}
.submenu-bottom a:hover {
text-decoration: none;
} HTML仍与步骤3中的相同。但是，我们还在.menu-icon Awesome（ 假日字体）菜单项中添加了Font Awesome（向下箭头）中的向下箭头图标，以指示mega菜单的存在（我们使用.menu-icon手柄设置样式）在上面CSS中）。
<li class="menu-item holidays"><a href="#">Holidays</a>
<i class="menu-icon fas fa-angle-down"></i>
...
</li>在下面，您可以看到一切都按预期进行：
6.添加悬停规则
为了使大型菜单悬停，我们需要将其隐藏并仅在.menu-item处于悬停状态时显示它：
.submenu {
display: none;
}
.menu-item:hover .submenu {
display: flex;
}
.menu-item:hover > a {
text-decoration: underline;
}现在，我们的flexbox大型菜单已启动并正在运行。 在下面的演示中，您可以对其进行测试并签出相应HTML和CSS代码：
结语
尽管构建大型菜单是一项复杂的任务，但使用flexbox完全可以做到，特别是如果您首先创建一个模板来帮助您正确布局的话。
您可能会问，使用CSS网格而不是flexbox创建大型菜单是否更容易/更好，我说“取决于”。 尽管CSS网格允许您创建二维布局，但flexbox带有开箱即用的内容识别功能，在这种情况下非常理想。
如果将mega菜单的每一行都变成一个弹性容器，则可以对每个行应用不同的对齐，换行和大小调整规则。 这也是Bootstrap 4等基于flexbox的框架的设计原则。 此外，flexbox仍比CSS Grid更好的支持（目前，全球使用的所有浏览器中有98.3％CSS网格是CSS网格的92.03％ ，但将来会有所改变）。
您还可以使用媒体查询和flexbox布局使大型菜单响应。 如果您想知道如何进行此操作，请查看我以前的教程，该教程有关如何使用flexbox构建响应式导航栏 。
翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-mega-menu-with-flexbox--cms-33540
vux flexbox使用
扫一扫
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
